避免在具有多個狀態的 React 中進行不必要的重新渲染

使用狀態來控制介面的不同部分是很常見的。然而，如果管理不好，多個狀態可能會導致不必要的重新渲染，影響系統效能。

問題：太多狀態 === 太多重新渲染

假設我們有一個管理使用者資料的元件。我們可以獨立聲明這些狀態，如下所示：

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

這裡我們有6個獨立的狀態，每次更新其中一個狀態時，整個元件都會重新渲染，現在假設我們需要更新6個狀態...是的，我們渲染該元件6 次。

解決方案：僅建立 1 個有關使用者資訊的狀態

緩解此問題的一種方法是將所有狀態合併到一個物件中。我們可以將所有使用者資訊保留在一種狀態中，而不是擁有單獨的狀態，它看起來像這樣：

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

現在，我們不再為每個狀態提供一個函數，而是使用 updateUser 函數，該函數僅接收所需的更改，並使用擴充運算子 (...) 將它們與先前的狀態組合起來。這允許您僅更新狀態的一部分，而其餘部分保持不變。

如果您只想更改有關該物件的 1 條信息，請執行以下操作：

setUser((prevState) => ({...prevState, age: 25}))

不同之處

當我們使用單獨的狀態時，每個單獨的狀態變更都會導致元件的重新渲染。當我們將所有狀態合併到一個物件中時，我們仍然有一次重新渲染，但它只發生一次，即使物件的多個部分發生變化。

優點

- 減少重新渲染：透過合併狀態，我們避免了多次不必要的重新渲染，從而提高了效能。
- 更容易維護：更容易在單一狀態下管理使用者訊息，簡化程式碼並使其更具可讀性。
- 部分控制更新： 我們只能更改狀態中需要修改的部分，而不會觸及其餘部分。

就是這樣！我希望我有幫助！
雖然我還在開發中，但這是我的作品集：https://lucaslima.vercel.app（我希望當你訪問它時，它已經準備好了哈哈哈）

成功！ ？

以上是避免在具有多個狀態的 React 中進行不必要的重新渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！