在React渲染方法上分解道具时的性能问题

Question

I was wondering if destructuring props on the render method will see the performance hurt, since every time you are creating them a new constant is created, and at the time of shallow comparing (in case you are using PureComponent), the shallow comparison will return false, thus re-rendering any children.

Se example below:

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

If you were to destructure an object from this.props , the value in the new variable would be a pointer to that object, a string. This is the same primitive string that would be sent if you passed this.props.complexObject directly as a prop. Therefore so long as the object reference is the same then PureComponent's shallow compare will return true.

This can lead to problems if you mutate your complex object because the pointer would remain the same, and the PureComponent would not update. This is why when any value changes in your complex object, you want to make a complete clone and pass that. This would be a new pointer and would get caught by the shallow compare and make the PureComponent update.