Question

我正在浏览ReactJS文档。我在状态和生命周期部分遇到了以下概念，

请勿直接修改状态例如，这不会重新呈现组件：

// Wrong
this.state.comment = 'Hello';

https://reactjs.org/docs/state-and-lifecycle.html

我尝试实现相同的行为，并看到重新渲染了该组件

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time : new Date(),
            note: "Time is-"
        }
    }
    componentDidMount() {
        this.timerId = setInterval(() => this.tick(), 1000);
    }
    componentWillUnmount() {
        clearTimer(this.timerId);
    }
    render() {
        return <h1>{this.state.note}{this.state.time.toLocaleTimeString()}</h1>
    }
    tick() {
        this.state.note = "Dude!! Time is";
        this.setState({
            time : new Date()
        })  
    }
}

ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
);

文本已从“时间是”重新呈现为“ Dude时间是”

有人可以解释吗？这种行为违背了反应文档所说的

Answer 1

之所以起作用，是因为您还在setState之后执行this.state.note = "Dude!! Time is"。如果您在此行之后删除setState调用，则该示例将无效。

此处是指向codeandbox的链接。我已删除了setState通话。

https://codesandbox.io/s/50r500j62p

修改状态对象直接在ReactJS中重新呈现组件

1 个答案: