为什么React要更新DOM的这一部分?

Why React updates this part of the DOM?

本文关键字：一部分 DOM React 更新 为什么      更新时间：2023-09-26

假设我有这个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元素被更新为当前日期，为什么?

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

来自React文档:

setState()将总是触发重新渲染，除非有条件呈现逻辑在shouldComponentUpdate()中实现。如果可变对象正在被使用，并且逻辑不能在shouldComponentUpdate()，只在新状态时调用setState()不同于之前的状态将避免不必要的重新渲染。

相关文章：