顯式變異和靜態心智模型是什麼意思？

Question

在本文中https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a我閱讀了引用「React的真正優勢：組合，單向數據流，免於DSL，顯式變異和靜態心智模型」。在最後。

explicit mutation和static mental model是什麼意思？

謝謝！

Answer 1

Explicit mutation - 這涉及到如何反應成分是理想表現爲或比喻爲pure功能，即給定一個特定的輸入（在這種情況下設置的props），你總是會得到相同的輸出（在這種情況下呈現的DOM ）不管你用同樣的道具嘗試多少次。因此，任何應用於組件或其數據的突變都應在明確的意圖下在組件的範圍內完成（這是內部state進來的地方，通常是作爲對輸入道具變化的反應） ，或者通過組件內部的一些用戶交互），並且這樣做也是可靠和可重複的 - 給定相同的道具和相同的用戶交互，結果仍應該是完全可預測的

由於這個原因，React特別好與不可變的數據結構一起作爲道具，這有助於實現這一目標（並且爲了提供性能增益，做出反應可以對您的輸入何時發生變化做出一些假設）

而且在表現這種方式，不可重複的邊緣情況的錯誤顯着減少，並且錯誤仍然存​​在，可以更容易地思索並往往被定位於組件或其直接輸入

Static mental model - 當編寫應用程序使用React查看圖層，您可以輕鬆地將自己的想法提煉爲手頭的組件，它可以完全從應用程序的上下文中移除，並且仍然有意義。你只需要考慮一下特定的輸入，這個特定的組件應該如何表現和行爲。

例如，給定待辦事項列表，您不需要記住，在應用程序的另一部分中，按下Complete All Tasks按鈕會更改每個待辦事項列表項節點的類名以顯示它已完成，並且它將刪除事件偵聽器它允許你在點擊時完成它們（即記住你的應用程序的哪些其他部分改變了你正在使用的DOM）

它可以簡單地作爲<TodoListItem complete={true} />組件單獨建模。如果它是真的，那麼可以通過設置它自己的className來顯示自己是否完整，並且可以根據是否完成來管理它自己的事件處理程序。它本質上是一個黑盒子，沒有別的東西需要知道它是如何完整顯示的，或者它完成時的表現。即按下一個按鈕只會通過它complete={true}並完成。

它更容易讓你的大腦專注於單一組件，什麼會使敏感的輸入，以及它應該如何表現，而不是必須考慮如果應用程序中的任何其他內容也將增加一個completed classname到同一個節點並顯示爲一個錯誤？

同樣重要的是，它可以很容易地測試，並且對其他人來說非常容易，只需看一下你的組件並理解它，然後自信地使用它，因爲它們知道它可以被孤立地處理。他們看到的是他們得到的。即使沒有應用程序領域知識的CSS/HTML專家，React甚至JavaScript本身，也可以用新的類名和標記來改變它的外觀，並且對在應用程序上下文中工作的變化有信心也許通過使用一個靜態工具，如https://storybook.js.org/這是一個很好的例子，用於很好的效果）