React 規則
如同不同的程式語言有各自表達概念的方式，React 也有其慣用語法（或規則），以易於理解的方式表達模式，並產生高品質的應用程式。
本節說明撰寫符合 React 慣用語法的程式碼所需遵循的規則。撰寫符合 React 慣用語法的程式碼有助於您撰寫井然有序、安全且可組合的應用程式。這些特性使您的應用程式更具備應變能力，也更容易與其他開發人員、函式庫和工具協作。
這些規則稱為 React 規則。它們是規則，而不僅僅是指導方針，因為如果違反這些規則，您的應用程式很可能會出現錯誤。您的程式碼也會變得不符合慣用語法，更難理解和推論。
我們強烈建議您搭配使用 嚴格模式 和 React 的 ESLint 插件，以協助您的程式碼庫遵循 React 規則。遵循 React 規則，您將能夠找出並解決這些錯誤，並維護應用程式的可維護性。
元件和 Hooks 必須是純粹的
元件和 Hooks 的純粹性是 React 的一項關鍵規則，可讓您的應用程式更具可預測性、易於除錯，並允許 React 自動最佳化您的程式碼。
- 元件必須是冪等的 – React 元件應始終針對其輸入（屬性、狀態和上下文）返回相同的輸出。
- 副作用必須在渲染之外執行 – 副作用不應在渲染中執行，因為 React 可以多次渲染元件以創造最佳使用者體驗。
- 屬性和狀態是不可變的 – 元件的屬性和狀態是針對單次渲染的不可變快照。切勿直接修改它們。
- Hooks 的傳回值和參數是不可變的 – 將值傳遞給 Hook 後，您不應修改它們。如同 JSX 中的屬性，傳遞給 Hook 的值會變成不可變的。
- 傳遞給 JSX 後的值是不可變的 – 在 JSX 中使用值後，請勿修改它們。在建立 JSX 之前移動修改操作。
React 呼叫元件和 Hooks
React 負責在必要時渲染元件和 hooks，以最佳化使用者體驗。它是宣告式的：您在元件的邏輯中告訴 React 要渲染什麼，React 會找出向使用者顯示它的最佳方式。
- 切勿直接呼叫元件函式 – 元件只能在 JSX 中使用。不要將它們作為一般函式呼叫。
- 切勿將 hooks 作為一般值傳遞 – Hooks 只能在元件內部呼叫。切勿將其作為一般值傳遞。
Hooks 規則
Hooks 是使用 JavaScript 函式定義的，但它們代表一種特殊類型的可重複使用的 UI 邏輯，並限制了它們可以被呼叫的位置。使用它們時，您需要遵循Hooks 規則。
- 僅在頂層呼叫 Hooks – 不要在迴圈、條件或巢狀函式內呼叫 Hooks。相反地，請始終在 React 函式的頂層、任何提前傳回之前使用 Hooks。
- 僅從 React 函式呼叫 Hooks – 不要從一般 JavaScript 函式呼叫 Hooks。