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

在 React 中，可以使用 受控組件 或 非受控組件 來管理輸入字段、復(fù)選框和文本區(qū)域等表單元素。這兩種方法提供了不同的方法來處理和更新表單數(shù)據(jù)，了解它們之間的區(qū)別對于為您的 React 應(yīng)用程序選擇正確的方法至關(guān)重要。

1.什么是受控組件？

在受控組件中，表單元素由React組件的狀態(tài)控制。表單數(shù)據(jù)通過 React 的狀態(tài)進行管理，用戶所做的任何更改都會反映在組件的狀態(tài)中。 React 組件充當(dāng)表單數(shù)據(jù)的“單一事實來源”。

受控組件如何工作：

• 表單元素（如 字段）的值由組件的狀態(tài)控制。
• 任何用戶輸入都會觸發(fā) onChange 事件，該事件會更新父組件中的狀態(tài)。
• 然后狀態(tài)會傳遞回表單元素，確保其與應(yīng)用程序狀態(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 組件）進行管理，使得跟蹤和驗證表單數(shù)據(jù)變得更加容易。
• 可預(yù)測性：由于React的狀態(tài)是事實來源，因此表單元素始終與狀態(tài)同步，確?？深A(yù)測性。
• 輕松驗證：您可以根據(jù)輸入值執(zhí)行實時表單驗證或條件渲染，因為數(shù)據(jù)是組件狀態(tài)的一部分。

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

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

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

• 表單元素的值存儲在 DOM 中，而不是存儲在 React 組件的狀態(tài)中。
• ref 用于直接訪問 DOM 元素并檢索或修改其值。
• 您可以選擇使用 onSubmit 處理程序 在提交表單時處理數(shù)據(jù)。

不受控制的組件示例：

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)輸入或復(fù)雜表單的場景中提供更好的性能。
• 對于簡單的用例來說更自然：對于非常簡單的表單或者當(dāng)用戶鍵入時不需要與表單數(shù)據(jù)交互時，不受控制的組件可能是一個更簡單的解決方案。

3.受控組件與非受控組件：主要區(qū)別

4.何時使用受控組件？

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

• 您需要與表單數(shù)據(jù)動態(tài)交互（例如，驗證、條件渲染）。
• 您需要實時更新表單數(shù)據(jù)（例如實時搜索、表單驗證）。
• 您需要管理和驗證表單中的多個輸入。

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

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

• 您擁有簡單的表單，無需實時交互或驗證。
• 您希望降低 React 中處理表單數(shù)據(jù)的復(fù)雜性。
• 性能至關(guān)重要，表單元素不應(yīng)動態(tài)更改或?qū)崟r交互。

6.結(jié)論

受控組件和非受控組件在 React 應(yīng)用程序中都占有一席之地。受控組件提供了更好的控制和可預(yù)測性，使其成為最復(fù)雜形式的理想選擇。然而，對于基本表單或當(dāng)您不需要實時控制數(shù)據(jù)時，不受控制的組件可能是更簡單、性能更高效的解決方案。

了解何時使用每種類型的組件將幫助您根據(jù)具體用例確定最佳方法。

以上是React 中的受控組件與非受控組件：選擇正確的方法的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！