Question

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

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

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

在 RenderWidget 中，我需要获得一个“动态”组合。（我用一个简单的函数重新创建了它，但在那部分我有更多的复杂性）。所以我将 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”。

为什么？

Answer 1

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

我也建议你阅读这篇article，它是由 react 核心团队的作者写的，除了memo，还有其他方法可以防止重新渲染

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

  return <LocalComp />;
});

Answer 2

我得到了答案！

对于“懒惰”的初始值，我们需要这样调用函数：

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

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

重新初始化状态

2 个答案: