React 中的受控元件與非受控元件：了解差異

在 React 中，可以使用 受控元件 或 非受控元件 來管理輸入欄位、複選框和文字區(qū)域等表單元素。這兩種方法提供了不同的方法來處理和更新表單數據，了解它們之間的差異對於為您的 React 應用程式選擇正確的方法至關重要。

1.什麼是受控組件？

在受控元件中，表單元素由React元件的狀態(tài)控制。表單資料透過 React 的狀態(tài)進行管理，使用者所做的任何變更都會反映在元件的狀態(tài)中。 React 元件可作為表單資料的「單一事實來源」。

受控組件如何運作：

• 表單元素（如 欄位）的值由元件的狀態(tài)控制。
• 任何使用者輸入都會觸發(fā) onChange 事件，該事件會更新父元件中的狀態(tài)。
• 然後狀態(tài)會傳回表單元素，確保其與應用程式狀態(tài)保持同步。

受控組件範例：

import React, { useState } from 'react';

const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);  // Update the state with the user input
  };

  return (
    <form>
      <input 
        type="text" 
        value={inputValue}       // Value is controlled by React state
        onChange={handleChange}   // Updates state on user input
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

受控組件的優(yōu)點：

• 集中控制：狀態(tài)在一個地方（React 元件）進行管理，使得追蹤和驗證表單資料變得更加容易。
• 可預測性：由於React的狀態(tài)是事實來源，因此表單元素始終與狀態(tài)同步，確?？深A測性。
• 輕鬆驗證：您可以根據輸入值執(zhí)行即時表單驗證或條件渲染，因為資料是元件狀態(tài)的一部分。

2.什麼是不受控制的組件？

在不受控制的元件中，表單元素由 DOM 本身管理，而不是由 React 的狀態(tài)管理。 React 不直接追蹤表單元素的值。相反，您可以使用 refs（引用）來存取 DOM 元素並檢索其當前值。

不受控制的組件如何運作：

• 表單元素的值儲存在 DOM 中，而不是儲存在 React 元件的狀態(tài)中。
• ref 用於直接存取 DOM 元素並檢索或修改其值。
• 您可以選擇使用 onSubmit 處理程序 在提交表單時處理資料。

不受控制的組件範例：

import React, { useState } from 'react';

const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);  // Update the state with the user input
  };

  return (
    <form>
      <input 
        type="text" 
        value={inputValue}       // Value is controlled by React state
        onChange={handleChange}   // Updates state on user input
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

不受控組件的優(yōu)點：

• 更少的樣板檔案：無需管理表單元素的狀態(tài)，使程式碼更乾淨、更簡單，尤其是對於具有大量欄位的表單。
• 效能：由於表單元素的值不會儲存在React的狀態(tài)中，因此不受控制的元件有時可以在具有許多動態(tài)輸入或複雜表單的場景中提供更好的效能。
• 對於簡單的用例來說更自然：對於非常簡單的表單或當使用者鍵入時不需要與表單資料互動時，不受控制的元件可能是更簡單的解決方案。

3.受控組件與非受控組件：主要差異

4.何時使用受控組件？

在以下情況下，受控組件是首選：

• 您需要與表單資料動態(tài)互動（例如，驗證、條件渲染）。
• 您需要即時更新表單資料（例如即時搜尋、表單驗證）。
• 您需要管理和驗證表單中的多個輸入。

5.何時使用不受控制的組件？

不受控制的組件較適合以下情況：

• 您擁有簡單的表單，無需即時互動或驗證。
• 您希望降低 React 中處理表單資料的複雜度。
• 效能至關重要，表單元素不應動態(tài)變更或即時互動。

6.結論

受控元件和非受控元件在 React 應用程式中都佔有一席之地。受控組件提供了更好的控制和可預測性，使其成為最複雜形式的理想選擇。然而，對於基本表單或當您不需要即時控制資料時，不受控制的元件可能是更簡單、效能更有效率的解決方案。

了解何時使用每種類型的元件將幫助您根據特定用例確定最佳方法。

以上是React 中的受控元件與非受控元件：選擇正確的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！