重新初始化 state

Question

我有一个带有一些“动态”导入的复杂组件。

我在代码沙箱上重新创建了我的组件树： https://codesandbox.io/s/clever-rosalind-t3cfm?file=/src/App.js:298-302

我有一个App.js文件，其中有一个对象列表。 每个 object，渲染一个RenderWidget组件。

在RenderWidget内部，我需要获得一个“动态”组合。 （我用一个简单的 function 重新创建了它，但我在那部分有更多的复杂性）。 因此，我将 comp 包装在 useMemo 上以避免重新创建组件。 （useMemo 有一个 console.log 来检查Comp是否被重新初始化）

在Comp内部，我们有一个 useState 声明，其初始值如下：

const getData = () => {
   console.log("getData called");
   return Math.random();
 };

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

如果您单击 H1，我们会强制更新 App.js。 如果您检查控制台，每次单击 H1 时都会收到“getData called”。

为什么？

Answer 1

如果父组件的 props 发生了变化，它会重新渲染它的所有子组件，你可以使用React.memo来防止不必要的重新渲染。

也建议大家看看这篇文章，是react核心团队的作者写的，除了memo，还有其他方法可以防止重渲染

export default memo(function RenderWidget() {
  const LocalComp = useMemo(() => {
    console.log("NO RE-INITIALIZED");
    return getComp();
  }, []);

  return <LocalComp />;
});

Answer 2

我得到了答案！

对于“惰性”初始值，我们需要像这样调用 function：

// Replace that
const [data, setData] = useState(getData());

// With that
const [data, setData] = useState(() => getData());