您的位置：首页 > Web前端 > React

React 数据流与状态控制－props与sate的区别

2017-04-18 00:00 375 查看
摘要: React 数据流与状态控制－props与sate的区别

React 基于状态实现对DOM控制和渲染。组件状态分为两种：一种是组件间的状态传递、另一种是组件的内部状态，这两种状态使用
props
和
state
表示。
props
用于从父组件到子组件的数据传递。组件内部也有自己的状态：
state
，这些状态只能在组件内部修改。

数据流与
Props


1.1 设置
props


1.2 JSX语法中的属性设置

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()
方法来设置
props
：

var sites = [{title:'itbilu.com'}];
var listSites = React.render(
<ListSites />,
document.getElementById('example')
)

setProps()
方法只能在组件外调用，不能在组件内部调用
this.setProps()
修改组件属性。组件内部的
this.props
属性是只读的，只能用于访问
props
，不能用于修改组件自身的属性。

1.2 JSX语法中的属性设置

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.3 
props
的传递

组件接收上级组件的
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
只应该用于存储简单的视图状（如：上面示例用于控制下拉框的可见状态）。

props
和
state
都不能直接修改，而应该分别使用
setProps()
和
setSate()
方法修改。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航