reactjs - 在 useEffect 期间多次更改状态时防止重新渲染

Question

在我的 React 应用程序中，我将在单个组件中多次实现 useState。然后在我的 useEffect 中，我将更改其中几个的状态:

import React, { useState, useEffect } from 'react';

const Projects = React.memo(function (props) {

    const [someState1, setSomeState1] = useState(false);
    const [someState2, setSomeState2] = useState(false);
    const [someState3, setSomeState3] = useState(false);

    useEffect(() => {
         if (someConditionMet) {
             setSomeState1(true);
             setSomeState2(true);
             setSomeState3(true);
         }
    });

    if (initialized) {
        return <div>Hello World</div>;
});

我注意到，每次调用 setSomeState1、setSomeState2、setSomeState3 时，整个组件都会为这些调用中的每一个重新呈现。我真的只希望它在 useEffect 完成时重新渲染一次。在 useEffect 中更改多个状态时，React 中是否有一种方法可以防止渲染发生多次？

Answer 1

您需要将依赖项数组添加到您的 useEffect 以便该条件仅被调用一次

useEffect(() => {
     if (someConditionMet) {
         setSomeState1(true);
         setSomeState2(true);
         setSomeState3(true);
     }
},[]);