React

（四）react加速dom渲染

问题概述

现在的web应用太复杂了，而且经常以ajax或WebSocket的形式获取数据，更新视图。而浏览器Dom渲染能力很差，每次数据更新都要更新dom树重新渲染性能很差。

react demo

react在运行时构建了基于内存的虚拟dom，会在更新时和原来的dom进行对比（diff），然后只渲染不同的地方。提高了性能。组件是react中非常重要的概念，通过props可以将属性，传入到子组件中。state是组件重要的一个概念，在组间声明中this.setState可以修改state的属性值。state一旦发生变化，该组件则会进行diff然后重新渲染，调用render函数。这里一句两句实在是说不清里面的关系。可以自己去了解下react，这里给出两个经典的demo。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }});
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example'));

解释：这里createClass创建了一个组件名为HelloMessage（即之后可以通过<HelloMessage>表示），然后改函数参数是一个对象且一定要有render函数，其返回值是该标签的显示内容（注意这里有很多jsx语法，即html嵌入js中，{}中是js）。props就是该标签的属性集合，这里最后会显示<h1>Hello John</h1>

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>
    );
  }});

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

解释：render函数是显示一个p然后onClick方法注册点击函数（注意html原生的是onclick小写这里是react独有的）。然后点击的时候改变了state，改变state后组件本身需要更新，即重新render，render的时候state.like已经改变。所以最后点一次切换一次。

小结

前端应用越来越大了，甚至类似react-native都已经想扩张到移动端了。前端js越来越多，dom渲染越来越频繁，这就要让浏览器压力山大了。我们知道浏览器性能十分有限，对于频繁的渲染会导致电脑卡顿，所以需要优化dom。这也是react初衷，不过react还提供组件的功能，对于组织大型应用，团队开发都有促进作用。