react and redux（一）props和state

安装

示例

总结

安装

安装好node.js和npm之后，命令行执行下面的命令:

npm install --global create-react-app

创建应用目录：

create-react-app first_react_app //first_react_app为应用名

在应用目录下：

npm start

启动之后浏览器会自动打开页面:http://localhost:3000/

应用的入口是src/index.js文件。发现渲染的组件是App,对应App.js文件中的组件。

示例

修改index.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ClickCounter from './ClickCounter';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<ClickCounter />, document.getElementById('root'));
registerServiceWorker();

这样应用启动后加载的组件就是ClickCounter这个组件了，这个组件实现对应的ClickCounter.js文件如下：

import React,{Component} from 'react';
export default class ClickCounter extends Component{

constructor(props){
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state={count:0};
}

onClickButton(){
this.setState({count:this.state.count+1});
}

render(){
return (
<div>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count:{this.state.count}
</div>
</div>
);
}
}

启动应用后，点击按钮，计数器自动加1。

下面是上面这个例子的加强版,实现自定义组件的相互嵌套。

父组件的代码如下：

import React,{Component} from 'react';
import Counter from './Counter';
export default class ControlPanel extends Component{
render(){
return(
<div>
<Counter caption="First" initValue={0}/>
<Counter caption="Second" initValue={10}/>
<Counter caption="Third" initValue={20}/>
</div>
)
}
}

其中父组件内部调用了子组件Counter，并传给它两个prop,一个是caption,一个是initValue，其中由于catpion属性是字符串，可以被JSX语法直接识别，而initValue是数字，由于JSX语法中，非字符串的属性赋值时需要用{}的形式才能正确赋值，所以以{0}这种方式。

下面是Counter组件的代码：

import React,{Component} from 'react';
export default class Counter extends Component{
constructor(props){
super(props);

this.onClickIncrementButton=this.onClickIncrementButton.bind(this);
this.onClickDecrementButton=this.onClickDecrementButton.bind(this);

this.state = {
count: props.initValue || 0
}
}

onClickIncrementButton(){
this.setState({count:this.state.count+1});
}

onClickDecrementButton(){
this.setState({count:this.state.count-1});
}

render(){
const {caption} = this.props;
return (
<div>
<button  onClick={this.onClickIncrementButton}>+</button>
<button  onClick={this.onClickDecrementButton}>-</button>
<span>{caption} count:{this.state.count}</span>
</div>
);
}
}

由上可见，传入的属性cation只是用于显示，initValue只是用于设置组件内部state的初值，然后又加了可以给count这个内部state加1和减1的按钮，以及最终将count这个state显示。

总结

本次的例子大致讲解了props和state的使用范围。props适用于组件外向组件内传参，而state只是在组件内部使用。

组件内修改state的值不能直接使用

this.state.count=this.state.count+1;

这种方式，因为这种方式只是野蛮地修改了state，却没有驱动组件进行重新渲染，所以并没有变化；而使用this.setState()函数首先改变this.state的值，然后驱动组件经历更新过程，界面上才会变化。

组件的构造函数中为什么要加上这两句话？

this.onClickIncrementButton=this.onClickIncrementButton.bind(this);
this.onClickDecrementButton=this.onClickDecrementButton.bind(this);

答：在ES6的语法中，类的每个成员函数在执行时的this并不是和类实例自动绑定的。而在构造函数中，this就是当前组件实例，所以为了将来在成员函数内部使用方便，在构造函数中将这个实例的特定函数绑定this为当前实例。这两条语句的作用，就是通过bind方法让当前实例中两个函数被调用时，函数内部的this始终指向当前组件实例。