React富交互性的动态用户界面

1、例子：

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 ? 'like' : 'haven\'t liked';

    return (

      <p onClick={this.handleClick}>

        You {text} this. Click to toggle.

      </p>

    );

  }

});

 

React.render(

  <LikeButton />,

  document.getElementById('example')

);

 

2、事件处理与合成事件（Synthetic Events)

React里面只需要把时间处理器（event handler）以驼峰命名（camelCased）形式当作组建的props传入即可，就像使用普通的HTML那样。React内部创建一套合成事件系统来使所有时间在IE8和以上浏览器表现一致。也就是说React知道如何冒泡和拨着事件，而且你的时间处理器接受到的events参数与W3C规范一致，无论你使用哪种浏览器。

如果需要在手机或者平板等设备上使用React，需要调用React.initializeTouchEvents(true)；启用触摸事件进行处理。

 

3、幕后原理：自动绑定和时间代理

Autobinding：在JavaScript中创建回调的时候为了this的正确性，一般需要显示的绑定方法到它的实例上，有了React，所有方法被自动绑定到了它的组件实例上，React还缓存这些绑定的方法，CPU和内存都是非常高效的。

事件代理:React实际并没有把事件处理器绑定大节点本身，当React启动的时候它最外层使用唯一一个事件监听处理所有事件。当组件被加载和卸载时，只有在内部应设立添加和删除事件处理器。

 

4、组件其实就是状态机（State Machines)

React把用户界面当作简单的状态机。把用户界面想象成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。

React里，只需更新组建的state，然后根据新的state重新渲染用户界面(不要操作DOM），React决定最搞笑的更新DOM。

 

5、State工作原理

常用过的通知React数据变化的方法是调用setState(data,cllback)。这个方法会合并（merge）data到this.state,并重新渲染组件，渲染完成后，调用可选的callback回调。

State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。

 

this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：

• 计算所得数据： 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到render() 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用this.state.listItems.length + ' list items' 比把它放到 state 里好的多。
• React 组件： 在 render() 里使用当前 props 和 state 来创建它。
• 基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。