react组件在使用useEffect时渲染多次

Question

我使用带有钩子的功能性反应组件。const [loaded, setLoaded] = React.useState(null);const [title, setTitle] = React.useState(title);React.useEffect(() => {    //...    fetch('https://jsonplaceholder.typicode.com/todos/1')      .then(response => response.json())      .then(json => {          setLoaded(true);          setTitle(title);      });}, []);在这种情况下，组件被渲染两次。一方面，这似乎是合乎逻辑的。但我在这个组件中也有一个复选框处理程序const changeHandler = event => {    //...    setTotal(new_total);    setError(false);};在这种情况下，虽然状态也改变了 2 次，但不会发生两次渲染。我不明白为什么会这样。聚苯乙烯解决这个问题没有问题，我想知道为什么会发生这种情况更新：如果我设置 useEffectsetLoaded(true);setTitle(title);setTitle2(title);setTitle3(title);将是 4 次重新渲染，如果我设置 changeHandlersetTotal(new_total);setError(false);setError2(false);setError3(false);将是 1 次重新渲染

Answer 1

调用useState()钩子的setter 方法的一个副作用是，这样做会触发组件重新渲染。

避免冗余重新渲染的一种解决方案是合并您的组件状态，如下所示：

function functionalComponent() {

    /* Merge both values into common "state object */

    const [{ loaded, title }, setState] = React.useState({ 

        loaded : null, 

        title : "inital title" 

    });

    React.useEffect(() => {

        /* 

        Single call to setState triggers on re-render only. The

        value of "new title" for title could have been set in the

        inital state, however I set it here to show how combined

        state can be updated with a single call to setState()  

        */

        setState({ loaded : true, title : "new title" })

        /*

        setLoaded(true);

        setTitle(title);

        */

    }, []);

    /* Use loaded and title variables as needed during render */

    return <div>{ loaded } - { title }</div>

}