react系列（4）props和state介绍

props和state用于组件的参数传递和状态变化，使组件依据初始化过程或用户操作从而实现界面视图的变化。

props

表示组件初始化参数，react官方认为，props应该是只读的，修改 props对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。该参数通过向组件标签属性赋值的方式向组件传递数据，如<HelloWorld name="John"/>。获取参数时使用{this.props.attr}，attr表示属性名称。

var HelloWorld = React.createClass({getDefaultProps : function(){return {hello : "Hello"}},render : function(){return (<h1>{this.props.hello} {this.props.name}</h1>);}});ReactDOM.render(<HelloWorld name="React!"/>,document.getElementById('example'));

结果：Hello React!
（注）getDefaultProps方法用于组件自身设置默认初始化参数。

state

表示组件状态，状态的更新意味着组件数据的更新，和props主要的区别在于props是不可变的，状态更新时会自动重新渲染用户界面（不要操作 DOM）。关于状态更新有两种方法：setState()和replaceState()。

（1）setState：设置状态，指合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。它并不会立即改变this.state，而是创建一个即将处理的state。因此该方法并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

（2）replaceState：替换状态，replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

var SetState = React.createClass({getInitialState:function(){return {bo:false}},handleClick:function(e){this.setState({bo:!this.state.bo}); //事件函数：每次状态改变时，都会重新执行render渲染},render:function(){var text = this.state.bo ? "红色" : "蓝色";var myStyle = this.state.bo ? {cursor:"pointer",color: '#FF0000'} : {cursor:"pointer",color: '#0000FF'}; return (<h1 style={myStyle} onClick={this.handleClick}>{text}</h1>);}});ReactDOM.render(<SetState />,document.getElementById('example'));

结果：点击文字后，文本和颜色发生变化。

State和Props组合测试案例：

var ChildComp = React.createClass({render:function(){return (<div><h1>{this.props.p}</h1><h1>{this.props.s}</h1></div>);}});var Comp = React.createClass({getDefaultProps:function(){return {p:"prop"} },getInitialState:function(){return {s:"state"}},render:function(){return (<div><ChildComp p={this.props.p} s={this.state.s}/></div>)}});ReactDOM.render(<Comp />,document.getElementById("example"));

结果：

强制渲染

强制渲染，forceUpdate(function(){//callback});是指当一些很深的组件state已经改变了或有些变量不在state上，但是你又想达到这个变量更新的时候，可以在该组件上面调用forceUpdate()，而不是使用this.setState()。forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

var StateTest = React.createClass({getInitialState:function(){return {msg:"click me to forceUpdate!"}},handleClick:function(e){//结果(forceUpdate）var targer = this;setTimeout(function(){targer.state.msg = "(forceUpdate finish)";targer.forceUpdate();},1000);},render:function(){var text = this.state.msg;var myStyle = {cursor:"pointer"};return (<h1 style={myStyle} onClick={this.handleClick}>{text}</h1>);}});var reactEle = ReactDOM.render(<StateTest />,document.getElementById('example'));

结果：点击“click me to forceUpdate!”文本1秒后变为“(forceUpdate finish)”。