React 呼叫元件與 Hooks

• 切勿直接呼叫元件函式
• 切勿將 Hooks 作為一般值傳遞
  • 不要動態修改 Hook
  • 不要動態使用 Hooks

切勿直接呼叫元件函式

元件應該只能在 JSX 中使用。不要將它們作為一般函式呼叫。應該由 React 來呼叫它。

React 必須決定何時呼叫您的元件函式 在渲染期間。在 React 中，您可以使用 JSX 來做到這一點。

function BlogPost() {
  return <Layout><Article /></Layout>; // ✅ Good: Only use components in JSX
}

function BlogPost() {
  return <Layout>{Article()}</Layout>; // 🔴 Bad: Never call them directly
}

如果元件包含 Hooks，則當元件在迴圈或條件式中被直接呼叫時，很容易違反 Hooks 的規則。

讓 React 協調渲染還可以帶來許多好處

• 元件不只是函式。 React 可以透過與元件在樹狀結構中的身分綁定的 Hooks，使用像是 _區域狀態_ 等功能來擴充它們。
• 元件類型參與協調流程。 透過讓 React 呼叫您的元件，您也告訴它更多關於樹狀結構的概念結構。例如，當您從渲染 <Feed> 切換到 <Profile> 頁面時，React 不會嘗試重複使用它們。
• React 可以增強您的使用者體驗。 例如，它可以讓瀏覽器在元件呼叫之間執行一些工作，這樣重新渲染大型元件樹就不會阻塞主執行緒。
• 更好的除錯體驗。 如果元件是程式庫知道的頭等公民，我們就可以構建豐富的開發者工具，以便在開發過程中進行內省。
• 更有效率的協調流程。 React 可以精確地決定樹狀結構中哪些元件需要重新渲染，並跳過不需要重新渲染的元件。這讓您的應用程式更快、更靈敏。

切勿將 Hooks 作為一般值傳遞

Hooks 只能在元件或其他 Hooks 內部呼叫。切勿將其作為一般值傳遞。

Hooks 允許您使用 React 功能來擴充元件。它們應該始終作為函式呼叫，並且永遠不要作為一般值傳遞。這可以實現 _局部推理_，或者讓開發人員能夠透過單獨檢視該元件來了解元件可以執行的所有操作。

違反此規則將導致 React 無法自動最佳化您的元件。

不要動態修改 Hook

Hooks 應該盡可能保持「靜態」。這表示您不應該動態修改它們。例如，這表示您不應該編寫高階 Hooks

function ChatInput() {
  const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks
  const data = useDataWithLogging();
}

Hooks 應該是不可變的，不應該被修改。不要動態修改 Hook，而是使用所需的功能建立 Hook 的靜態版本。

function ChatInput() {
  const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook
}

function useDataWithLogging() {
  // ... Create a new version of the Hook and inline the logic here
}

不要動態使用 Hooks

也不應該動態使用 Hooks：例如，不要透過將 Hook 作為值傳遞來在元件中進行依賴注入

function ChatInput() {
  return <Button useData={useDataWithLogging} /> // 🔴 Bad: don't pass Hooks as props
}

您應該始終將 Hook 的呼叫內嵌到該元件中，並在其中處理任何邏輯。

function ChatInput() {
  return <Button />
}

function Button() {
  const data = useDataWithLogging(); // ✅ Good: Use the Hook directly
}

function useDataWithLogging() {
  // If there's any conditional logic to change the Hook's behavior, it should be inlined into
  // the Hook
}

這樣一來，<Button /> 就更容易理解和除錯。當 Hooks 以動態方式使用時，它會大大增加應用程式的複雜性，並抑制局部推理，從長遠來看，會降低團隊的生產力。它也更容易意外違反 Hooks 不應該有條件地呼叫的 Hooks 規則。如果您發現自己需要模擬元件來進行測試，最好改為模擬伺服器以響應罐頭資料。如果可能的話，通常使用端到端測試來測試您的應用程式會更有效。