React 基于状态实现对DOM控制和渲染。组件状态分为两种:一种是组件间的状态传递、另一种是组件的内部状态,这两种状态使用props 和state 表示。props 用于从父组件到子组件的数据传递。组件内部也有自己的状态:state ,这些状态只能在组件内部修改。
- 数据流与
Props
- 1.1 设置
props
- 1.2JSX语法中的属性设置
- 1.3
props 的传递
- 组件内部状态与
state
Props 与state 的比较
1. 数据流与Props
React中的数据流是单向的,只会从父组件传递到子组件。属性props (properties)是父子组件间进行状态传递的接口,React会向下遍历整个组件树,并重新渲染使用这个属性的组件。
1.1 设置props
可以在组件挂载时设置props :
var sites = [{title:'itbilu.com'}];
<ListSites sites={sites} />
也可以通过调用组件实例的setProps() 方法来设置var sites = [{title:'itbilu.com'}];
var listSites = React.render(
<ListSites />,document.getElementById('example')
)
setProps() 方法只能在组件外调用,不能在组件内部调用this.setProps() 修改组件属性。组件内部的this.props 属性是只读的,只能用于访问props ,不能用于修改组件自身的属性。
1.2JSX语法中的属性设置
JSX语法中,props 可以设置为字符串:
<a href="http://itbilu.com">IT笔录</a>
或是通过{} 语法设置:
var obj = {url:'itbilu.com',name:'IT笔录'};
<a href="http://{obj.url}">{obj.name}</a>
JSX 方法还支持将props 直接设置为一个对象:
var site = React.createClass({
render: function() {
var obj = {url:'itbilu.com',name:'IT笔录'};
return: <Site {...obj} />;
}
})
props还可以用来添加事件处理:
var saveBtn = React.createClass({
render: function() {
<a onClick={this.handleClick} >保存</>
}
handleClick: fuction() {
//…
}
})
1.3props 的传递
组件接收上级组件的props ,并传递props 到其下级组件。如:
var myCheckbox = React.createClass({
render: myCheckbox() {
var myClass = this.props.checked ? 'MyChecked' : 'MyCheckbox';
return (
<div className={myClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
React.render(
<MyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</MyCheckbox>,document.getElementById('example')
);
2. 组件内部状态与state
props可以理解为父组件与子组件间的状态传递,而React的组件都有自己的状态,这个内部状态使用state 表示。
如,用state 定义一个<DropDown /> 组件的状态:
var SiteDropdown = React.createClass({
getInitalState: function() {
return: {
showOptions: false
}
},render: function() {
var opts;
if(this.state.showOptions) {
<ul>
<li>itbilu.com</li>
<li>yijiebuyi.com</li>
<li>niefengjun.cn</li>
</ul>
};
return (
<div onClick={this.handleClick} >
</ div>
)
},handleClick: function() {
this.setSate({
showOptions: true
})
}
});
随着state 的改变,render 也会被调用,React会对比render 的返回值,如果有变化就会DOM。
state与props 类似,只能通过setSate() 方法修改。不同的是,state 只能在组件内部使用,其是对组件本身状态的一个引用。
3.Props 与state 的比较
React会根据props 或state 更新视图状态。虽然二者有些类似,但应用范围确不尽相同。具体表现如下:
props 会在整个组件数中传递数据和配置,props 可以设置任命类型的数据,应该把它当做组件的数据源。其不但可以用于上级组件与下组件的通信,也可以用其做为事件处理器。
state 只能在组件内部使用,state 只应该用于存储简单的视图状(如:上面示例用于控制下拉框的可见状态)。
state 都不能直接修改,而应该分别使用setProps() 和setSate() 方法修改。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|