javascript - 在React渲染方法上分解 Prop 时的性能问题

我想知道在render方法上销毁 Prop 是否会损害性能，因为每次创建它们时都会创建一个新常量，并且在进行浅表比较时(如果您使用的是PureComponent)，将返回浅表比较错误，因此重新渲染任何 child 。

Se示例如下:

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>
    )
  }
}

最佳答案

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

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

关于javascript - 在React渲染方法上分解 Prop 时的性能问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50274614/