使用react，在函数组件返回的JSX代码中，我可以有：
MyComponent.jsx
<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>其中，我的子组件通过备忘录导出：
MySubComponent.jsx
export default React.memo(MySubComponent)然而，这破坏了memoization，因为格式为**{{...}}或{[...]}**的props每次都会示例化一个新的对象/数组（相同的值，但不同的内存地址），因此React.memo的props shallow-compare会看到不同。
是否有任何ESLint/JSLint规则来检测这些类型的 prop ？
2条答案
按热度按时间jei2mxaa1#
你可以使用useMemo来记忆对象或数组，并将其作为props传递给MySubComponent，如下所示：
在SubComponent.jsx中
这只适用于简单对象。
eaf3rand2#
既然你已经知道了这个问题，你就不需要eslint来帮你识别它，除非这是一个重复的模式。看来你已经过了取证阶段了
我建议你从两个选择中选择一个：
1.用一个自定义函数覆盖
React.memo(Component, isEqual)的第二个参数，在这个函数中，您可以通过值比较输入数组或对象，因此只要内容保持不变，不断变化的prop引用就变得无关紧要。但是，如果您大量地重新呈现此组件，这可能会成为一项开销。1.另一种选择是在组件外部定义数组和对象，并保持传递它们时包含修改后的内容，但保持引用不变。