React - 交互性和动态UI
标签（空格分隔）： react， 前端框架
简单的例子
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="demo03.js"> // ** Your code goes here! ** </script>
</body>
</html>
script代码：
var LikeButton=React.createClass({
getInitialState: function(){
return {liked:false};
},handleClick:function(){
this.setState({liked: !this.state.liked});
},render: function(){
var text=this.state.liked ? 'liked': 'haven\'t liked';
return (
<p onClick={this.handleClick} > You {text} this. Click to toggle. </p> ); } }); ReactDOM.render( <LikeButton />,document.getElementById('example') );
事件处理与综合事件
使用React使用事件与正常的html使用事件类似，都是直接在属性中设置处理函数。React通过实现综合的事件系统，能够确保所有的事件能够在IE8上正确处理，即React知道根据特定的规范进行事件的冒泡和捕获，无论使用什么浏览器，事件殾能与w3c规范一致。
自动绑定及事件委托
为了使代码更容易理解，react底层做了一些处理：
- Autobinding: 在javascript中创建callbacks时，需要明确将方法绑定到其实例，这样this的值才会是正确的。但是通过React，并不需要如此，react每一个方法是自动绑定到其组件实例上的(除了使用ES6类语法外)。React缓存了其绑定的方法，更有效的使用了内存和cpu,同时也能够少打些字。
- **Event delegation:**React并没有将每一个事件处理都挂在节点上。实际上，React启动时，会通过一个简单的事件监听器监听所有事件。当一个组件安装或者卸载时，内部的一个map会相应的添加或者移除event handler。当事件发生时，React通过其内部的mapping知道如何分发该事件。如果mapping已经没有事件了，React的事件处理器会只是一些简单的的空操作。更深入理解可参考 ：http://davidwalsh.name/event-delegate
组件即状态机
React将所有的UI都看成是一个个状态机。通过将UI看成一个个不同的状态并且进行渲染，很容易来保持 UI的一致性。
在React中，可以简单的更新一个组件的状态并且基于这个新状态渲染一个新UI。 React会以最有效的方式来更新DOM。
状态是如何工作的
通知React数据的改变一般是通过调用方法setState(data,callback)来实现,其中callback是可选的。该方法能够将data合并到this.state中并且对组件进行重新渲染。组件完成渲染时，callback被调用。一般情况下，并不需要提供callback，因为react能够保证此时UI是最新的状态 。
哪些组件能够拥有状态
大多数组件应该简单的从props中获取data并且渲染。但是如果需要与用户输入或者服务器请求或者时间等进行交互时，应该使用state。
应该尽可能的保持组件是无状态的。如此可以将状态与逻辑进行隔离，同时也能减少冗余，使应用更简单。
一个常规的做法是：创建一些无状态的组件仅仅来渲染数据，在其上层创建一个有状态的组件，通过props属性将状态传递给其无状态的子节点。有状态组件（即父组件）封装所有的交互逻辑，其无状态的组件(即子节点)只渲染data。
哪些数据应该包含在state中
state应该包含那种能够触发UI更新的数据。在真实app中，这些数据是非常小的并且是json格式，当创建有状态的组件时，应该考虑最小的能够代表状态的属性，并且将其存入this.state中。在render（）方法中，仅计算那些需要依赖于state的信息。在state中添加冗余属性意味着需要自己明确的进行同步而不是直接react为你进行计算。
哪些数据不应用包含在state中
this.state应该只包含最小程序上代表ui状态的数据 。因此，不能包含以下数据 ：
- Computed data:计算数据，不要担心基于state的预处理值。 将所有计算放在render()中。比如说：在state中，有一个列表项的数组，如果只是想将渲染列表项大小，，可以在render()方法中直接渲染this.state.listItems.length+’ list items’，而不需要将其存入state中。
- React Components: react组件。基于props和state在render（）方法中创建组件。
- Duplicated data from props:props中的重复数据。 尽量使用props作为源。如果要在state中存储props需要知道它先前的值，因为如果父组件重渲染的话其props可能会改变 。
原文：http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
