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 完成后重新渲染一次。React 中是否有办法防止在 useEffect 中更改多个状态时多次发生渲染？

标签： reactjs

Answer 1

您需要将一个依赖数组添加到您的 useEffect 中，以便只调用一次条件

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