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);
     }
},[]);

Answer 2

尝试使用 useRef 代替 useState ，这不会导致多次渲染。

在使用期间多次更改状态时防止重新渲染

2 个答案: