如果你喜歡這篇文章，可以買一杯咖啡來支持Buy me Coffee

保持組件純淨

有些 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 (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

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

結論

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

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

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