我试图理解 props 的不可变行为,并为此做了一个 POC。 我已将一个对象传递给子组件,并更改了子组件中该对象的属性(props)。 我的代码工作正常,没有出现任何错误。如果 props 是不可变的,它应该会出错。 下面是代码示例 https://codesandbox.io/s/vigilant-chihiro-wdcnzg?file=/src/ChildComponent.js
请帮助我理解这个概念。
我已经尝试过以上POC
可变性的概念与能够改变对象的状态有关。
在您的示例中,您能够修改从 user
组件传递到
App
的 ChildComponent
对象的 reference,并在 DOM 中呈现更改。
然而,真正的事实来源(
user
组件中存在的App
对象)保持不变(不可变),并且只有父组件中该对象的更改才会触发子组件中的re-render
。
举例来说,您决定在初始渲染后,想要将
ChildComponent
中的用户名从 Mr Blue
更改为“Mr Green”,从而
function ChildComponent({ user }) {
user.name = "Mr Blue";
const changeUserName = () => {
user.name = "Mr green"
};
return (
<>
<h3>Child Component</h3>
<p>User Name: {user.name}</p>
<button onClick={changeUserName}>Change User Name</button>
</>
);
}
export default ChildComponent;
不会对 DOM 产生任何影响,因为我们将 reference 更改为 prop
user
,而不是传递给子组件的实际 prop。
我希望这有帮助。