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

Question

也许我对反应流的理解有误，但有人能解释一下这个魔法吗：）

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

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

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

  useEffect(() => {
    setList(tabs);
  }, [tabs]);

Answer 1

问题是当 React 重新渲染功能组件时，state hook React.useState(tabs)不会再次执行。

这就是为什么之前的 state 在下一个渲染周期中持续存在的原因。

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