为什么我必须通过React中的useEffect挂钩来更新内部状态

Question

也许我对react flow有错误的理解，但有人能解释这种魔力吗：(

为什么我必须通过React中的useEffect挂钩来更新内部状态？

我认为组件更新将触发重写useState钩子的初始状态。

const [list, setList] = useState<TabItem[]>(tabs);
useEffect(() => {
setList(tabs);
}, [tabs]);

Answer 1

React重新渲染功能组件时，状态挂钩React.useState(tabs)不会再次执行。

这就是为什么上一个状态在下一个渲染循环中持续存在的原因。

因此，为了让您的props派生到您的内部状态，您可以在React.useEffect()钩子内提供tabsprops，以便useEffect回调将再次运行，并使用setList(tabs)再次设置状态。