javascript - 为什么 React 会更新这部分 DOM？

Question

假设我有这个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 元素会使用当前日期进行更新，为什么？

Answer 1

当组件的状态发生更改时，其 render 方法将触发。

来自React documentation :

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.