Javascript 在React render方法上分解道具时出现性能问题

我想知道在render方法上对道具进行分解是否会影响性能，因为每次创建道具时都会创建一个新常量，并且在进行浅层比较时（如果使用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>
    )
  }
}

导出默认类输入扩展React.PureComponent{
渲染（）{
//创建新的常量，以防它们不是原语
//比较它们和触发器时将返回false
//子组件重新渲染
常量{type，value，required}=this.props
返回(
)
}
}

如果要从

this.props

解构对象，则新变量中的值将是指向该对象的指针，即字符串。如果您将

This.props.complexObject

直接作为prop传递，则将发送相同的基本字符串。因此，只要对象引用相同，PureComponent的浅层比较就会返回true

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