Reatc.js：保持元件純淨

保持組件純淨

有些 JavaScript 函數應該是純的。純函數只執行計算，不執行其他操作。將元件編寫為純函數，您可以避免隨著程式碼庫的成長而出現的所有令人困惑的錯誤和不可預測的行為。您可以使您的元件易於管理。

純度

那我們要如何創建一個純函數呢？一個函數應該具備什麼特質才能成為純函數？純函數應該是具有以下特徵的函數：

• 它只管自己的事。它不會更改呼叫之前存在的任何物件或變數。

• 相同的輸入，相同的輸出。給定相同的輸入，純函數應該始終返回相同的結果。它不應該對相同的輸入給出不同的結果。

讓我們考慮一個數學公式：y = 2x

如果 x = 2，y = 4。這個不變量始終是相同的結果。

如果 x = 3，y = 6。這個不變量始終是相同的結果。

如果 x = 3，有時 y 不會是 9、–1 或 2.5，取決於其他情況。

如果 y = 2x 且 x = 3，則 y 將始終為 6。

如果我們將其變成 JavaScript 函數：

function getDouble(number) {
  return 2 * number;
}

getDouble 是一個純函數。如果你傳遞 3，它將回傳 6。總是。

React 是圍繞著這個概念建構的。它假設每個元件的行為都像純函數，這意味著您的 React 元件應該始終在給定相同輸入的情況下傳回相同的 JSX 輸出.

讓我們舉例來解釋純化合物。

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

它總是傳回使用者給定的任何參數。 就像數學公式

你可以把你的食材想像成食譜。你知道食材，如果你在烹飪過程中不引入新的食材，你每次都會得到同樣的菜。

結論

組件必須是純的，意思是：

它只管自己的事。它不應更改渲染之前存在的任何物件或變數。

相同的輸入，相同的輸出。給定相同的輸入，元件應該始終傳回相同的 JSX。

以上是Reatc.js：保持元件純淨的詳細內容。更多資訊請關注PHP中文網其他相關文章！