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设置propsmyComponent .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 去修改。
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！