React 中的受控元件與非受控元件：選擇正確的方法-js教程-PHP中文網

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

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

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

1.什麼是受控組件？

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

受控組件如何運作：

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

受控組件範例：

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;

登入後複製

受控組件的優點：

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

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

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

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

表單元素的值儲存在 DOM 中，而不是儲存在 React 元件的狀態中。
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;

登入後複製

不受控組件的優點：

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

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

功能受控組件不受控制的組件標題>

Feature	Controlled Components	Uncontrolled Components
State Management	Data is managed by React’s state.	Data is managed by the DOM, using refs.
Data Flow	Value is passed as a prop and updated via state.	Value is accessed directly through the DOM.
Form Validation	Easy to validate and control form data in real-time.	Validation is more complex and may require additional handling.
Boilerplate Code	Requires more code to manage state and updates.	Less boilerplate code but requires refs for accessing form data.
Performance	May be slower with a large number of form elements.	Faster for large forms or when you don’t need real-time data updates.
Complexity	Offers more flexibility and control over form behavior.	Simpler and more straightforward for simple forms.

狀態管理資料由 React 的狀態管理。資料由 DOM 使用 refs 進行管理。資料流值作為 prop 傳遞並透過狀態更新。直接透過 DOM 存取值。表單驗證輕鬆即時驗證和控製表單資料。驗證更加複雜，可能需要額外處理。樣板代碼需要更多程式碼來管理狀態和更新。更少的樣板程式碼，但需要引用來存取表單資料。性能大量表單元素可能會變慢。對於大型表單或不需要即時資料更新時速度更快。複雜性提供更大的靈活性和對表單行為的控制。簡單表單更簡單、更直接。表>