React将状态作为props传递给子组件时，如何维护状态封装？

嘿，这个问题问到点子上了——引用类型props的传递确实是React里容易让人困惑的点，咱们一步步理清楚：

首先直接给结论：React不会自动为子组件复制传入的对象/数组类型props，子组件拿到的就是父组件里那个对象的引用。那React是怎么维护状态封装的？核心靠两个原则，加上开发者的合理实践：

1. 单向数据流 + Props只读规则 #

React的核心设计之一就是单向数据流：状态只应该由拥有它的组件（通常是父组件）来修改，子组件只能接收props并使用，绝对不能直接修改props对象本身。

比如你给的示例里，父组件修改myObj.a的操作其实是不符合React最佳实践的——如果这是真正的状态，应该用setState来更新（比如创建一个新对象：setState(prev => ({ myObj: {...prev.myObj, a: "bar"} }))），而不是直接修改原对象。当父组件通过setState更新状态后，会触发重渲染，把新的props传递给子组件，子组件才会拿到更新后的值，UI也会同步更新。

子组件如果需要基于props做修改，正确的做法是：要么把props转成自己的本地状态（用useState或者useEffect+useState），要么通知父组件去修改原状态（比如通过父组件传递过来的回调函数）。

2. 手动复制props以隔离变化（按需） #

如果确实需要让子组件不受父组件对原对象修改的影响（比如父组件可能会在非渲染流程里修改这个对象），那你可以在子组件里手动创建一个props的副本：

// 对于对象
const Child = ({ myObj }) => {
  const localObj = { ...myObj }; // 浅拷贝
  // 或者深拷贝（适合嵌套对象）
  // const localObj = JSON.parse(JSON.stringify(myObj));
  
  // 之后操作localObj就不会影响父组件的原对象了
}

这种复制是开发者主动做的，不是React自动提供的。另外也可以使用不可变数据工具（比如Immer）来创建不可变的状态，从根源上避免意外的引用修改。

再看你的示例 #

你的示例里，父组件没有用setState更新状态，所以父组件不会重渲染，子组件也不会重新接收props。但因为myObj是引用类型，子组件持有它的引用，所以1秒后打印时能看到修改后的值。但这是JavaScript的特性，不是React的问题——如果父组件用setState更新myObj，子组件就会收到新的props，UI也会显示更新后的内容。

总结一下：React靠单向数据流和props只读的规则来维护状态封装，而非自动复制引用类型props。开发者只要遵循这个规则，再按需手动处理引用隔离，就能避免状态混乱的问题。

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