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

 2016年01月31日    4113     声明


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


  1. 数据流与Props
  2. 组件内部状态与state
  3. Propsstate的比较


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。

stateprops类似,只能通过setSate()方法修改。不同的是,state只能在组件内部使用,其是对组件本身状态的一个引用。


3. Propsstate的比较

React会根据propsstate更新视图状态。虽然二者有些类似,但应用范围确不尽相同。具体表现如下:

  • props会在整个组件数中传递数据和配置,props可以设置任命类型的数据,应该把它当做组件的数据源。其不但可以用于上级组件与下组件的通信,也可以用其做为事件处理器。
  • state只能在组件内部使用,state只应该用于存储简单的视图状(如:上面示例用于控制下拉框的可见状态)。
  • propsstate都不能直接修改,而应该分别使用setProps()setSate()方法修改。