computer-science - 显式突变和静态心智模型是什么意思？

Question

在本文中 https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a我读到了“React 的真正优势:组合、单向数据流、摆脱 DSL、显式变异和静态心理模型”这句话。在最后。

做什么explicit mutation和 static mental model意思？

谢谢!

Answer 1

Explicit mutation - 这涉及 react 组件如何理想地表达为或比喻为 pure函数，即给定特定输入(在本例中为 props )，无论您尝试使用相同的 Prop 多少次，您将始终获得相同的输出(在本例中为渲染的 DOM)。

因此，应用于组件或其数据的任何更改都应该明确地在组件范围内进行(这是内部 state 出现的地方，通常作为对输入 Prop 更改的 react ，或通过组件内的一些用户交互)并且这样做也是可靠和可重复的 - 给定相同的 Prop 和相同的用户交互，结果仍然应该是完全可预测的

出于这个原因，React 特别擅长与不可变数据结构作为 Prop 合作，这有助于实现这一目标(并且在这样做时，react 可以对输入何时发生变化做出一些假设，以提供性能提升)

同样以这种方式，不可重复的边缘情况错误会显着减少，并且仍然存在的错误可以更容易地推断出来并倾向于定位到组件或其直接输入
Static mental model - 使用 React 编写应用程序 View 层时，您可以轻松地将您的想法提炼到手头的组件上，它可以完全从应用程序的上下文中删除并且仍然有意义。你只需要考虑给定一些特定的输入，这个特定的组件应该如何外观和行为。

例如，给定一个待办事项列表，您不需要记住在应用程序的另一部分按下 Complete All Tasks按钮更改每个待办事项列表项节点的类名以显示它已完成，并删除允许您在单击时完成它们的事件监听器(即记住应用程序的哪些其他部分会改变您正在使用的 DOM)

它可以简单地单独建模为 <TodoListItem complete={true} />成分。如果为真，则可以通过设置自己的 className 来显示自己是完整的，并且可以根据是否完整来管理自己的事件处理程序。它本质上是一个黑匣子，没有其他东西需要知道它是如何显示为完整的，或者它在完成时的行为方式。即按下按钮只会传递它 complete={true}并完成。

你的大脑更容易专注于单个组件，什么是合理的输入，以及它应该如何表现，而不是还要考虑应用程序中的其他任何东西是否也会添加 completed类名到同一节点并表现为错误，对吗？!

同样重要的是，它使测试变得容易，而且其他人也非常容易出现，看一眼你的组件并理解它，并自信地使用它，因为他们知道它可以被孤立地对待。他们所见即所得。即使对于没有应用程序领域知识的 CSS/HTML 专家，React，甚至 javascript 本身，也可以使用新的 classNames 和标记来改变它的外观，并对它们在应用程序上下文中的变化充满信心(也许通过使用诸如 https://storybook.js.org/ 之类的静态工具，这是这一点被用来取得巨大效果的一个完美例子)