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（）将始终触发重新渲染渲染逻辑在shouldComponentUpdate（）中实现。如果可变的话正在使用对象，逻辑无法实现 shouldComponentUpdate（），仅在新状态时调用setState（）与以前的状态不同，将避免不必要的重新渲染。

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

1 个答案: