reactjs - "immutable props"是否意味着你不能在 props 上调用对象的方法？

Question

看来我可以在 child 的 Prop 上放置一个HTMLElement，例如Canvas， child 就会很高兴地在上面画画。我可以看到各种有用的案例，我想做这类事情。

然而，这似乎违反了“ child 永远不应该修改他们的 Prop ”的规则。

这向我提出了一个问题: child 可以用 props 上收到的对象做什么？您对对象进行的任何方法调用都可能导致该对象的状态发生更改(您不一定意识到)，所以这是否意味着您不应该调用通过 props 传递的对象上的方法？

Answer 1

“ children 永远不应该修改他们的 Prop ”这一说法并不完全正确 - 它比这更微妙。

React 背后的一般思想之一是显示的外观 - View - 尽可能地从 React 状态流动。也就是说，理想情况下，在启动脚本时，如果您获得了正在渲染的所有组件的 React 状态，您将能够完全确定 View 对用户来说应该是什么样子。

不幸的是，有时有些数据并不能自然地从状态流入 React View - 例如使用需要突变的工具(或库)，在 Canvas 上绘图就是其中之一。在这种情况下，尽可能在 React 框架内工作，但如果你必须改变一个非 React 对象才能获得所需的结果......好吧，这就是你必须做的，但不是一个大问题。

如果 React View 依赖于变异对象内存在的数据(而不是提供自己 View 的对象)，则会出现问题。例如，你不能这样做

const App = ({ obj }) => {
  useEffect(() => {
    setTimeout(() => {
      obj.foo = 'bar';
    }, 2000);
  }, []);
  return <span>{obj.foo}</span>
};

<App obj={{ foo: 'foo }} />

因为 React 依赖于对象内部的数据来决定渲染什么。如果对象发生变化，React 将不知道它需要重新渲染。

如果一个对象作为您的应用程序所需逻辑的一部分而发生变化，但 React 的 View 不依赖于变化的数据，那么就没有问题。

另一种看待它的方式:

react 状态 -> react View 很好

发生变异的对象 -> 对象 View 很好

对象发生变异 -> React View 不好

所以

"children should never modify their props"

应该更像

"children should never modify their props if their props correspond to React state"

因为React提供的 View 是从状态流动的，并且 View 只有在状态被重新设置(没有被改变)时才知道何时重新渲染。

does that mean you should not call methods on an object passed in on props?

只要您了解这些方法的作用，并确保调用这些方法不会违反 React 原则，就可以随意调用它们。调用导致非 React 突变(并且其突变不会更改 React 用于渲染的数据)的方法有时是一种必要的邪恶。