React渲染方法中解构props是否会引发性能问题？

其实不用太担心解构本身的性能开销——现代JavaScript引擎对这种变量解构的优化已经非常到位，创建几个新常量的成本几乎可以忽略不计。你提到的PureComponent触发子组件不必要重渲染的情况，问题根源不在解构操作本身，我们来仔细拆解一下：

先分析你的示例代码 #

export default class Input extends React.PureComponent { 
  render () { 
    const { type, value, required } = this.props 
    return ( 
      <div className={cx('Input')}> 
        <APureComponent type={type} value={value} required={required} /> 
      </div> 
    ) 
  } 
}

你注释里担心“创建新常量会让非原始类型props浅比较失败”，但这里有个关键误解：解构出来的变量和this.props里的对应属性是同一个引用（针对非原始类型而言）。比如如果this.props.value是一个对象，那const { value } = this.props之后，value变量只是指向这个对象的另一个“指针”，内存地址完全没变。这时候APureComponent做浅比较时，对比的是引用地址，只要父组件传入的value引用没变化，即使你解构了，浅比较也会通过，不会触发重渲染。

真正触发重渲染的场景 #

只有当父组件每次渲染时，传入的props是新生成的引用类型（比如父组件render里直接写value={{name: 'foo'}}，或者value=[1,2,3]），这时候不管你解不解构，this.props.value本身就是一个全新的对象/数组，子组件的PureComponent浅比较时会发现引用变了，从而触发重渲染——这锅真的不该解构背。

结论和优化建议 #

• 解构props本身不会带来性能损耗，也不会改变props的引用关系；
• 要避免PureComponent的不必要重渲染，核心是让引用类型props在没有实际变化时保持引用稳定：
  • 类组件里可以把不变的引用类型存在组件实例的属性上（比如this.cachedValue = {name: 'foo'}），而不是在render里每次创建新对象；
  • 如果是函数组件，用useMemo缓存对象/数组，用useCallback缓存函数类型的props。

内容的提问来源于stack exchange，提问作者Nicolas