Question

我想知道渲染方法上的解构道具是否会看到性能受损，因为每次创建它们时都会创建一个新的常量，并且在浅层比较时（如果使用的是PureComponent），浅层比较将返回false，从而重新渲染任何孩子。

以下示例：

export default class Input extends React.PureComponent {

  render () {

    // creating new constants, that in case they are no primitives
    // will return false when shallow comparing them and trigger
    // child component re-render

    const { type, value, required } = this.props

    return (
      <div className={cx('Input')}>
        <APureComponent type={type} value={value} required={required} />
      </div>
    )
  }
}

Answer 1

如果要从this.props解构对象，则新变量中的值将是指向该对象的指针，即字符串。如果您直接将this.props.complexObject作为道具传递，则会发送相同的原始字符串。因此，只要对象引用相同，那么PureComponent的浅层比较将返回true。

如果改变复杂对象，这可能会导致问题，因为指针将保持不变，并且PureComponent不会更新。这就是为什么当复杂对象中的任何值发生变化时，您希望进行完整克隆并传递它。这将是一个新指针，将被浅层比较捕获，并使PureComponent更新。

在React渲染方法

1 个答案: