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

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

1.什麼是受控組件？

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

受控組件如何運(yùn)作：

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

受控組件範(fàn)例：

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)點(diǎn)：

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

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

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

不受控制的組件如何運(yùn)作：

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

不受控制的組件範(fàn)例：

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)點(diǎn)：

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

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

4.何時(shí)使用受控組件？

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

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

5.何時(shí)使用不受控制的組件？

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

• 您擁有簡(jiǎn)單的表單，無(wú)需即時(shí)互動(dòng)或驗(yàn)證。
• 您希望降低 React 中處理表單資料的複雜度。
• 效能至關(guān)重要，表單元素不應(yīng)動(dòng)態(tài)變更或即時(shí)互動(dòng)。

6.結(jié)論

受控元件和非受控元件在 React 應(yīng)用程式中都佔(zhàn)有一席之地。受控組件提供了更好的控制和可預(yù)測(cè)性，使其成為最複雜形式的理想選擇。然而，對(duì)於基本表單或當(dāng)您不需要即時(shí)控制資料時(shí)，不受控制的元件可能是更簡(jiǎn)單、效能更有效率的解決方案。

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

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