为什么 React 会更新这部分 DOM？答案

【问题标题】：Why React updates this part of the DOM?为什么 React 会更新这部分 DOM？
【发布时间】：2015-06-07 18:49:32
【问题描述】：

说我有这个reactjs 组件：

var React= require("react");

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 (
            <div>
                <h1>{new Date().toTimeString()}</h1>    
                <p onClick={this.handleClick}>
                    You {text} this. click to toggle.
                </p>
            </div>
        );
    }
});

React.render(<LikeButton/>, document.getElementById('mount'));

当我触发 onClick 事件时，h1 元素会更新为当前日期，为什么？

【问题讨论】：

不确定我是否理解这个问题。你改变一个组件的状态，组件重新渲染？
整个组件会重新渲染，而不是其中的某些部分？

标签： reactjs javascript reactjs

【解决方案1】：

当一个组件的状态改变时，它的render 方法将被触发。

来自React documentation：

setState() 将始终触发重新渲染，除非有条件渲染逻辑在 shouldComponentUpdate() 中实现。如果可变正在使用对象，并且无法在其中实现逻辑 shouldComponentUpdate()，只有在新状态时才调用 setState() 与之前的状态不同将避免不必要的重新渲染。

【讨论】：