React学习笔记（四）-- 数据流

简介

React的组件简单理解起来其实就是一个函数，这个函数会接收props和state作为参数，然后进行相应的逻辑处理，最终返回该组件的虚拟DOM展现。在React中数据流向是单向的，由父节点流向子节点，如果父节点的props发生了改变，那么React会递归遍历整个组件树，重新渲染所有使用该属性的子组件。那么props和state究竟是什么？它们在组件中起到了什么作用？它们之间又有什么区别和联系呢？接下来我们详细看一下。

Props

props其实就是properties的缩写，可以理解为组件的属性，你可以使用props给组件传递任意类型的数据（操作起来就像我们在HTML标签内部定义某些自定义属性一样），也可以添加事件处理器，例：

//定义属性变量和事件处理方法
var myDefineProps = [{ name : "first prop" }];
var clickHandler = function(){
    ...
}

// 直接设置props
<MyComponent myDefineProps = { myDefineProps }  onClick = { clickHandler } />

这里还允许我们使用组件的一个实例方法setProps来设置组件的props，但是需要注意的是，必须在子组件上或者组件树外调用setProps，切勿在组件内部调用this.setProps，例：

var myDefineProps = [{ name : "first prop" }];
var myComponent = React.render({
    <MyComponent />,
    document.querySelector("body")
});

// 外部调用setProps设置props
myComponent .setProps({ myDefineProps : myDefineProps  });

我们可以通过this.props来访问props，但绝对不可以通过这种方式去修改props（理解为this.prop是只读的即可），一个组件绝对不可以自己修改自己的props。我们还可以通过propType去约束规范prop的类型，可以通过getDefaultProps方法设置prop的默认值。（可参见我的上一篇笔记）

State

state是用来描述组件视图状态的。其与props的区别在于，state是随着用户交互而产生变化的状态，props一旦定义就不再发生改变，例：

var SecondComponent= React.createClass({ 
    getInitialState : function() { 
        return {liked : false}; 
    }, 
    handleClick : function(event) { 
        this.setState({liked : !this.state.liked}); 
    }, 
    render : function() { 
        var text = this.state.liked ? 'like' : 'haven\'t liked'; 
        return ( <p onClick = {this.handleClick}> You {text} this. Click to toggle. </p> ); 
    }
});
ReactDOM.render( <SecondComponent />, document.querySelector("body"));

上例中 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，this.setState的每次调用都会触发 this.render 方法，进而再次渲染组件。

注意：不可直接修改 this.state，要通过 this.setState 去修改。

参考

【1】《React引领未来的用户界面开发框架》
【2】 React 入门实例教程