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

React - 交互性和动态UI

2015-12-22 16:58 513 查看

React - 交互性和动态UI

标签（空格分隔）： react，前端框架

简单的例子

html代码：

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航