React Props不同使用方式下的异常行为及原因探究

差异原因 #

1. 解构赋值操作的是局部变量：当你通过let { name } = props解构props时，相当于把props.name的当前值复制了一份，存入新的局部变量name里。后续修改这个局部变量，只会改变变量自身的值，完全不会影响原props对象里的name属性。如果组件最终渲染的是props.name，自然会输出父组件传来的原始值John。

2. 直接修改props是操作原对象引用：React的props本质是父组件传递过来的普通JavaScript对象，虽然React官方强制要求props是只读的（违反会触发控制台警告），但从语法层面，对象的属性是可以被修改的。当你执行props.name = "Mike"时，是直接修改了原props对象的name属性，所以渲染props.name时就会显示修改后的Mike。

两种写法的核心区别 #

• 解构赋值（局部变量）：

  • 与原props对象解耦，仅复制属性值到局部变量
  • 修改局部变量不会影响原props，也不会引发组件意外重渲染
  • 符合React对props只读的设计原则，是推荐的写法

• 直接修改props对象：

  • 直接操作父组件传递的对象引用，破坏了props的不可变性
  • 修改后会改变原props的内容，可能导致父组件或其他依赖该props的子组件出现状态异常
  • 违反React规范，会触发警告，属于错误写法

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