Javascript 重新初始化状态

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

我在codesandbox上重新创建组件树：

我有一个

App.js

文件，其中有一个对象列表。每个对象，渲染一个

RenderWidget

组件

在RenderWidget中，我需要一个“动态”comp。（我用一个简单的函数重新创建了它，但在这一部分我有更多的复杂性）。因此，我将comp包装在useMemo上，以避免组件重新创建。（UseMoom有一个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”

---

为什么？

如果父组件道具已更改，它将重新渲染其所有子组件，您可以使用

React.memo

防止不必要的重新渲染

我还建议你读一下，这是react核心团队的作者写的， 除备注外，还有其他防止重新渲染的方法

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

  return <LocalComp />;
});

导出默认备忘录（函数RenderWidget（）{
const LocalComp=useMoom（（）=>{
console.log（“没有重新初始化”）；
返回getComp（）；
}, []);
返回；
});

我得到了答案

对于“lazy”初始值，我们需要如下调用函数：

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

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