学习React 时一直对 props state 混淆不清,今天来捋一捋。好记性不如烂笔头!
props:英文中是properties.可以使用它把任意类型( arbitrary inputs)的数据传递给组件.所以我们尽可能把props当成数据源,它有着传递数据的作用.
下面的例子自定义带有参数的组件 Text :
var Text = React.createClass({
render: function() {
return (
大家好,我是用{this.props.name}渲染出来的!age={this.props.age}
);
}
});
ReactDOM.render(<Text name={"react"} age={181}/>,document.getElementById('well'));
浏览器显示结果:
state:每个组件都可以拥有自己的state,state 与 props的区别在于 state 只存在于组件的内部
下面的例子体现了state 保存了该组件Application的必要数据,即下拉框是否显示的布尔值:
let Application = React.createClass({
getInitialState: function () {
return { showOptions: false }; },
render: function () {
let options;
if (this.state.showOptions) {
options = (<ul id="options">
<li>apple</li>
<li>banana</li>
<li>pear</li>
</ul> )
}
return (
<div className="dropdown" onClick={this.handleClick}>
<button>Choose a fruit</button>{options}
</div>
) },
handleClick: function () {
this.setState({ showOptions: true });
}
});
浏览器中点击 Choose a fruit 则出现了下拉框:
总结:
state 保存组件正常工作时的必要数据。比如前面出现过的用来表示下拉框是否显示的布尔(true or false),再比如表单验证时的出错信息显示等等。this.props表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
注意:
1.避免在组件内部修改 this.props,请把props 当作是只读的。
2.使用this.setState来设置状态,而不要使用this.state直接修改状态
对props state 最好的理解莫过于 概念了解+demo试验,所以后续我将对props在组件树上传递数据进行讨论,敬请期待哦!