时间戳

首页 > 解决方案 > 在道具中传递对象时避免重新渲染孩子

javascript - 在道具中传递对象时避免重新渲染孩子

问题描述

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

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）。

即使-object 没有改变，我有什么选择可以避免不必要的重新渲染( )？PerformanceComponentstyles

标签： javascriptreactjsreact-hooks

解决方案

正如其他答案所说，您需要将一个函数作为第二个参数传递给React.memo它将接收前一个道具和当前道具，以便您可以决定是否应该重新渲染组件（就像shouldComponentUpdate类组件的生命周期一样）。

因为比较整个对象以查看是否有任何更改可能是一项昂贵的操作（取决于对象）并且因为您可以拥有多个属性，所以确保它有效的一种方法是使用 lodash _.isEqual。

import { isEqual } from 'lodash'

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

export default React.memo(PerformanceComponent, isEqual)

这样你就不必担心实现它isEqual并且它也有很好的性能。

推荐阅读