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（）时开始。因此，在这里，当计数器组件中的状态发生变化时，React必须生成元素树，然后React将从上到下开始协调，并且当它要求Greeting组件返回元素树时，必须打印“调用问候”消息。因此，每当我们单击增量按钮时，我们都必须在控制台中看到消息“已打招呼”，但是该消息仅打印一次，而我们多次单击了增量按钮？

Answer 1

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

Answer 2

那是因为您的<Counter />内的整个树在调用setState时被重新渲染。而且由于<Greeting />在计数器之外，因此不会重新呈现。

如果要重新渲染<Greeting />组件，则应将其放置在Counter组件的render函数中。

React中的对帐

2 个答案: