在本文https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a中，我读到了引用“React的真正优势：组合，单向数据流，免于DSL，显式变异和静态心理模型”。在最后。
explicit mutation和static mental model的含义是什么？
谢谢！
答案 0 :(得分：7)
Explicit mutation - 这涉及如何将反应组件理想地表达为或类似于pure函数，即给定特定输入（在本例中为props的集合），您将无论您尝试使用相同的道具多少次，总是得到相同的输出（在这种情况下呈现DOM）。
因此，任何应用于组件或其数据的突变都应该明确意图在组件的范围内（内部state进入的地方），通常作为对更改的反应在输入道具中，或通过组件内的一些用户交互）并且这样做也是可靠和可重复的 - 给予相同的道具和相同的用户交互，结果应该仍然是完全可预测的
出于这个原因，React特别擅长将不可变数据结构作为道具组合，这有助于实现这一目标（并且这样做可以对输入发生变化做出一些假设，以提供性能提升）< / p>
同样以这种方式表现，不可重复的边缘案例错误显着减少，并且仍然存在的错误可以更容易推理并且倾向于本地化到组件或其直接输入
Static mental model - 在使用React编写应用程序视图层时，您可以轻松地将您的想法提炼到手头的组件，它可以完全从应用程序的上下文中删除，但仍然有意义。你只需要考虑一下特定的输入，这个特定的组件应该如何看待和表现。
例如，给定Todo列表，您不需要记住在应用程序的另一部分按下Complete All Tasks按钮更改每个待办事项列表项节点的类名以显示它已完成，并且它删除允许您在单击时完成它们的事件侦听器（即记住应用程序的哪些其他部分会改变您正在使用的DOM）
它可以简单地作为<TodoListItem complete={true} />组件单独建模。如果它是真的，那么可以通过设置自己的className来显示自己完整，并可以根据是否完成来管理自己的事件处理程序。它本质上是一个黑盒子，没有其他任何东西需要知道它是如何显示为完整的或它在完成时的行为方式。即按一个按钮就可以通过它complete={true}并完成。
你的大脑更容易专注于单个组件，什么会产生合理的输入，以及它应该如何表现，而不是还要考虑应用程序中的其他任何内容是否也会添加{{1 classname到同一个节点并且表现为一个bug吧！！
同样重要的是，它使测试变得容易，并且非常容易让其他人出现，看一下你的组件并理解它，并自信地使用它，因为他们知道它可以被孤立地对待。他们所看到的就是他们得到的东西。即使是没有应用程序领域知识的CSS / HTML专家，React，甚至是javascript本身，也可以通过新的classNames和标记来改变它的外观，并对在应用程序上下文中工作的变更充满信心（也许通过使用静态工具，如https://storybook.js.org/，这是一个很好的例子，这一点被用来产生很好的效果）