React 中的 Props 不变性

Question

我试图理解 props 的不可变行为，并为此做了一个 POC。 我已将一个对象传递给子组件，并更改了子组件中该对象的属性（props）。 我的代码工作正常，没有出现任何错误。如果 props 是不可变的，它应该会出错。 下面是代码示例 https://codesandbox.io/s/vigilant-chihiro-wdcnzg?file=/src/ChildComponent.js

请帮助我理解这个概念。

我已经尝试过以上POC

Answer 1

可变性的概念与能够改变对象的状态有关。

在您的示例中，您能够修改从 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。

我希望这有帮助。