避免在具有多个状态的 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中文网其他相关文章！