javascript - React 中的协调

Question

const Greeting = () => {
    console.log("Greeting is called");
    return <h2> Hello World </h2>;
}

class Counter extends React.Component{
    constructor(props){
        console.log("Counter is called");
        super(props);

        this.state = {
            counter: 0,
        }

        this.increment = this.increment.bind(this);
    }

    increment() {
        this.setState( (prevState) => ({ counter: prevState.counter+1 }));
    }

    render(){
        const { counter } = this.state;
        return (
            <button onClick={this.increment}>Increment {counter}</button>
        )
    }
}

const App = () =>
    <div>
        <Greeting />
        <Counter />
    </div>

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

我正在从文档中阅读有关 React 组件、元素和实例的内容，它说协调将在您调用 ReactDOM.render() 或 setState() 时开始。因此，当 Counter 组件中的状态发生变化时，React 必须生成元素树，为此 React 将从上到下开始协调，当它要求 Greeting 组件返回元素树时，必须打印消息“Greeting is called” .因此，当我们单击增量按钮时，我们必须在控制台中看到消息“Greeting is called”，但是当我们多次单击增量按钮时，该消息只打印一次？

Answer 1

当您通过 setState() 更改组件的状态时，只有该组件的子树会更新，而不是整个 React 树。