React 何时使用全局变量而不是状态

Question

我将从 API 加载的数据放入在函数组件外部声明的变量中。我曾想过将其置于某种状态，因为它需要通过多次渲染来保持。但我没有看到目的，因为我的代码中没有任何内容对数据的更改做出反应。

如果我继续使用这种方法在整个渲染过程中记住被动数据，这会是一种反模式吗？

var cityList;
function Component(){
    
    useEffects(async ()=>{
        if (!cityList)}{
            cityList = await loadCities();
        }
    });
    
    ...
}

另外我知道我可以使用像useMemo(). 但我想知道这是否有问题。

最重要的是，使用这样的变量而不是 State 或 memo 的可能原因是什么

Answer 1

之所以使用state而不是组件外部的变量是因为重新渲染。

如果您不使用状态，组件将不会使用从 api 返回的新数据进行更新。

另外，如果你只想更新一次数据，正确的useEffect使用方法如下（已注释）。

const [ cityList, setCityList ] = useState([]);

function Component(){
    
    useEffects(()=>{      //<-- remove async here as it's not allowed.
        
        const getData = async () => {
              
              const data = await loadCities();
              setCityList(data)

        }
        getData();
    },[]);  //<---- add a empty dependency so it only called once when component mounts
    
    ...
}

如果它不改变，我们通常使用外部组件变量。

const initialData = ['a','b','c']

component A = () => {
      // it's fine to use initialData out of the component because it doesn't change.
}

当然，有时我们也可以在组件外部使用可以随时间变化的变量。但前提是组件的渲染不依赖于它。（例如使用全局变量来跟踪 setTimeout）