ReactJS入门2:组件状态

React组件可以简单看做是包含props和states的函数。

上一节总结了创建新组建和数据属性的传递。本节主要讲解组件的状态。

React认为UI是不同状态的展现。在React中，开发者只需更新组件的状态，然后根据此新状态呈现新的UI。在呈现新的UI时，React具有局部更新的特点，即：React只渲染有变化的部分。在介绍组件状态之前，先了解一下React局部刷新的特点。

1.React的局部刷新

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});
//每隔500毫秒渲染一次组件
setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('content')
  );
}, 500);

setInterval(function,time)方法用于设置计时器，作用是每隔time时间，会调用一次function。

在文本字段中如入您的姓名后，React只会更改UI中的时间字符串，而不会将输入的名字刷新掉。即：React渲染组件时，只对UI中发生变动的地方进行局部刷新。

2.使用state的情况

当需要响应用户输入、服务器请求或时间的推移时，需要为组件添加state，其它情况应保持组件的无状态。使尽可能多的组件处于无状态，这样可以将状态隔离到合理的位置，减少冗余，从而使代码更容易理解。（注意：局部刷新的例子中虽然有用户输入，但是并未作出响应，故没有添加state。）

3.为组件添加state

状态应包含组件的事件处理程序可能更改的数据，以触发UI更新。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ;
    return (
      <p onClick={this.handleClick}>
        The state is {text}. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('content')
);

1.getInitialState() 用于定义初始状态。可以通过this.state获取。
2.事件handleClick()用于修改组件的状态。this.setState（）方法用来修改状态值。
3.在render()的内部根据这个状态作出相应。每次更新状态后，自动调用this.render()方法重新渲染组件。

触发事件前：

触发事件后：

4.复合组件

创建复合组件的目的：通过构建新组件分离不同的问题。

针对复合组件，React定义了一种新的关系：从属关系（owner-ownee）；owner指调用其它组件的组件，ownee指被调用的组件。区别于父子关系，从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。

注意：为了保持UI的一致性，ownee不能修改props的值，必须和owner设置的值一致。即：值的修改必须放在owner中。

//owner
var CommentBox = React.createClass({
  render : function(){
    return (<div>
               <p>I am a box.</p>
               <CommentList author={this.props.author} />
            </div>);
  }
});
//ownee      
var CommentList = React.createClass({
  render : function(){
    return (<div>The author is {this.props.author}.</div>);
  }
});

ReactDOM.render(
  <CommentBox author='wei.hu' />,
  document.getElementById('content')
);

5.组件策略

常见的一种模式是“一个有状态的组件+多个无状态的组件”。有状态的组件封装了所有的交互逻辑，而无状态组件以声明的方式处理渲染数据。

未完，待续。

更多内容，请访问：http://www.cnblogs.com/BlueStarWei/

更多内容，请访问：http://www.cnblogs.com/BlueStarWei