複数の状態に対応する 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 つの独立した状態があり、これらの状態の 1 つが更新されるたびに、全体 コンポーネントが再レンダリングされます。次に、6 つの状態を更新する必要があると想像してください...はい、レンダリングします。このコンポーネントを 6 回実行します。

解決策: ユーザー情報に関する状態を 1 つだけ作成します

この問題を軽減する 1 つの方法は、すべての状態を 1 つのオブジェクトに統合することです。個別の状態を持つ代わりに、すべてのユーザー情報を 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}))

違い

個別の状態を使用する場合、個々の状態の変更によりコンポーネントの再レンダリングが発生します。すべての状態を 1 つのオブジェクトに統合しても、再レンダリングは 1 回だけ行われますが、オブジェクトの複数の部分が変更された場合でも、再レンダリングは 1 回だけ行われます。

利点

- 再レンダリングの削減: 状態を統合することで、複数の不必要な再レンダリングを回避し、パフォーマンスを向上させます。
- メンテナンスの容易化: ユーザー情報を単一の状態で管理することが容易になり、コードが簡素化され、読みやすくなります。
- 部分的に制御された更新: 残りの部分には触れずに、変更する必要がある状態の部分のみを変更できます。

それだけです!お役に立てれば幸いです！
まだ開発中ですが、私のポートフォリオはこちらです: https://lucaslima.vercel.app (アクセスしたら準備完了だと思います、笑)

成功! ?

以上が複数の状態に対応する React での不必要なレンダリングの回避の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。