usestate函数式更新_javascript – 从组件中的useState多次调用状态更新程序会导致多次重新呈现...

我第一次尝试React钩子,所有看起来都很好,直到我意识到当我获取数据并更新两个不同的状态变量(数据和加载标志)时,我的组件(数据表)呈现两次,即使两个调用状态更新程序正在发生在同一个函数中.这是我的api函数,它将两个变量都返回给我的组件.

const getData = url => {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(async () => {

const test = await api.get('/people')

if(test.ok){

setLoading(false);

setData(test.data.results);

}

}, []);

return { data, loading };

};

在普通的类组件中,你只需要调用一次来更新可以是一个复杂对象的状态,但“钩子方式”似乎是将状态分成更小的单元,其副作用似乎是多个在单独更新时呈现.任何想法如何缓解这个？

解决方法:

您可以将加载状态和数据状态组合到一个状态对象中,然后您可以执行一个setState调用,并且只有一个渲染.

注意：与类组件中的setState不同,从useState返回的setState不会合并具有现有状态的对象,它会完全替换该对象.如果要进行合并,则需要读取先前的状态并自行将其与新值合并.请参阅docs.

在确定您遇到性能问题之前,我不会过分担心渲染渲染.渲染(在React上下文中)并将虚拟DOM更新提交到真实DOM是不同的事情.这里的渲染是指生成虚拟DOM,而不是更新浏览器DOM. React