React 的 ESLint：是否有规则来检测需要 useMemo 的 props？

Question

通过 React，在功能组件返回的 JSX 代码中我可以得到：

MyComponent.jsx

<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>

我的子组件是通过记忆导出的：

MySubComponent.jsx

export default React.memo(MySubComponent)

但是这会破坏记忆，因为格式为 {{...}} 或 {[...]} 的 props 每次都会实例化一个新的对象/数组（相同的值，但不同的内存地址） ，因此 React.memo 的 propsshallow-compare 看到它不同。

有没有 ESLint/JSLint 规则来检测这些类型的 props ？

Answer 1

您可以使用 useMemo 来记忆对象或数组并将其作为 props 传递给 MySubComponent，如下所示：

const obj = React.useMemo(() => ({a: 0, b:1}), []);

<MySubComponent props1={obj}/>

在 SubComponent.jsx 中

export default React.memo(MySubComponent);

这只适用于简单的对象。

Answer 2

由于您已经知道该问题，因此不需要 eslint 来识别它，除非这是一个重复的模式。看来你已经过了发现阶段了。

我建议选择以下两个选项之一：

1. 使用自定义函数覆盖

   React.memo(Component, isEqual)

   的第二个参数，您可以在其中按值比较输入数组或对象，因此只要内容保持不变，更改 prop 引用就变得无关紧要。但是，如果您广泛地重新渲染该组件，这可能会成为一种开销。
2. 您的另一个选择是在组件外部定义数组和对象，并继续传递修改后的内容，但保持引用相同。

Answer 3

是的，存在一个插件：eslint-plugin-react-perf -> https://www.npmjs.com/package/eslint-plugin-react-perf