如何仅强制 React.memo 渲染组件一次（在初始加载时）？

Question

在我的父组件中，我有一个子组件，我只需要渲染一次 - 在最开始时。 因为在下一页重新加载之前，里面的数据永远不会改变。 我尝试做的是以某种方式强制 React.memo 阻止渲染这个子组件：

const ParentComponent = (props) => {

    const ChildComponent = React.memo(({items}) => {
        const { param1, param2, param3 } = items;
        ...
        return (<Box>..</Box>);
    }, (prev, nxt) => true); // Here I try to force no render
    
    return (<Box>
          <ChildComponent items={{
             param1: 'some val..',
             param2: 'some val..',
             param3: 'some val..',
          }} />
          ...
       </Box>);
}

但是子组件仍然会在每次父状态更改时重新渲染。 难道我做错了什么？

Answer 1

首先，在另一个组件中定义一个组件是一种不好的做法，因为

1. 性能问题，正如您所遇到的
2. 您不能重用组件-> 可扩展性差
3. 通过更改子组件，您必须更新父组件的源代码，反之亦然-->容易引入副作用

因此，为了让您的生活更轻松，请提取ChildComponent 。

const ChildComponent = props => {
  return (
    <Box>
      {/* do whatever you like */}
    </Box>
  );
};

export default memo(ChildComponent);

const ParentComponent = props => {
  const items = {
    param1: 'some val..',
    param2: 'some val..',
    param3: 'some val..',
  };

  return (
    <Box>
      <ChildComponent 
        items={items} 
        // You can also pass other props from the ParentComponent, in case ChildComponent needs it
      />
    </Box>
  );
};

Answer 2

当然，很少有人可以通过使用 memoization 来实现这一点。 但首先我建议您将ChildComponent定义移到ParentComponent之外。 这两种方式都要求您像您所做的那样将ChildComponent包装在 React.memo 中，所以这部分是可以的。

第一种方法是确保items道具的值（参考）是稳定的，如果你想避免不必要的子组件重新渲染。 因此解决方案是将items对象包装在 useMemo 中并仅计算一次以使引用变得稳定。

第二种方法是使用 React.memo 函数的第二个参数，并传递自定义isEqual函数以确定您的道具何时更改，例如对items道具的后续值执行深度相等检查，以避免不必要的重新渲染。 更多关于这个可以在这里找到反应备忘录