javascript - 在 Prop 中传递对象时避免重新渲染 child

Question

假设我有一个这样的性能优化组件:

const PerformanceComponent = ({style}) => {
     return <View style={style}>...</View>
}

export default React.memo(PerformanceComponent)

我正在使用父级内部的组件，如下所示:

{someArray.map((style) => (
    <PerformanceComponent style={style} />
)}

我正在为 style 传递不同的对象，它可能看起来像这样:

const styles = {
    width: 200,
    height: 200
}

现在 React.memo 将无法解决问题，因为我正在传递一个对象，而 React 只会比较内存地址(我认为它称为 Shallow Compare )。
我有哪些选择 避免不必要的重新渲染 ( PerformanceComponent )，即使 styles - 对象没有改变？

Answer 1

正如其他答案所说，您需要将函数作为第二个参数传递给 React.memo它将接收先前的 prop 和当前的 prop，因此您可以决定是否应该重新渲染组件(就像 shouldComponentUpdate 类组件的生命周期一样)。
因为比较整个对象以查看是否有任何更改可能是一项昂贵的操作(取决于对象)并且因为您可以拥有多个属性，所以确保它有效的一种方法是使用 lodash _.isEqual .

import { isEqual } from 'lodash'

const PerformanceComponent = ({style}) => {
     return <View style={style}>...</View>
}

export default React.memo(PerformanceComponent, isEqual)

这样您就不必担心实现 isEqual它也有很好的表现。