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

我使用带有钩子的功能性反应组件。


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 次,但不会发生两次渲染。我不明白为什么会这样。


聚苯乙烯


解决这个问题没有问题,我想知道为什么会发生这种情况


更新:


如果我设置 useEffect


setLoaded(true);

setTitle(title);

setTitle2(title);

setTitle3(title);

将是 4 次重新渲染,如果我设置 changeHandler


setTotal(new_total);

setError(false);

setError2(false);

setError3(false);

将是 1 次重新渲染


慕姐8265434
浏览 1219回答 2
2回答

斯蒂芬大帝

调用useState()钩子的setter 方法的一个副作用是,这样做会触发组件重新渲染。避免冗余重新渲染的一种解决方案是合并您的组件状态,如下所示:function functionalComponent() {&nbsp; &nbsp; /* Merge both values into common "state object */&nbsp; &nbsp; const [{ loaded, title }, setState] = React.useState({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; loaded : null,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; title : "inital title"&nbsp;&nbsp; &nbsp; });&nbsp; &nbsp; React.useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Single call to setState triggers on re-render only. The&nbsp; &nbsp; &nbsp; &nbsp; value of "new title" for title could have been set in the&nbsp; &nbsp; &nbsp; &nbsp; inital state, however I set it here to show how combined&nbsp; &nbsp; &nbsp; &nbsp; state can be updated with a single call to setState()&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; setState({ loaded : true, title : "new title" })&nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; setLoaded(true);&nbsp; &nbsp; &nbsp; &nbsp; setTitle(title);&nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; }, []);&nbsp; &nbsp; /* Use loaded and title variables as needed during render */&nbsp; &nbsp; return <div>{ loaded } - { title }</div>}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript