我将把从API加载的数据放在函数组件外部声明的变量中。我曾想过把它放在一个状态下，因为它需要通过多个渲染来保持。但我没有看到目的，因为我的代码中没有任何东西对数据的更改做出反应。
如果我一直使用这种方法在整个渲染过程中存储被动数据，这会是一种反模式吗？
var cityList;
function Component(){
useEffects(async ()=>{
if (!cityList)}{
cityList = await loadCities();
}
});
...
}
另外，我知道我可以使用像useMemo()这样的钩子。但我想知道这是否有问题。
最重要的是，使用这样的变量而不是状态或备忘录的可能原因是什么
之所以在组件外部使用state而不是变量，是因为重新渲染。
如果不使用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(
是的，不要使用那个方法。
如果值可以更改，您可以设置一个状态以保持这些值：
function Component() {
const [cityList, setCityList] = useState()
useEffect(async () => {
if (!cityList) {
const response = await loadCities();
setCityList(response);
}
}, [cityList]);
...
}
查看React文档中的此示例：https://reactjs.org/docs/faq-ajax.html#example-使用ajax结果设置本地状态
如果数据没有改变，你可以在组件内声明一个变量：
function Component() {
const cityList = []
...
}
您引用的钩子useMemo是一个优化。它可以用来避免不必要的计算，因为它存储了一个记忆值。当您有依赖于其他值的昂贵计算时，useMemo非常有用。
查看官方文档：https://reactjs.org/docs/hooks-reference.html#usememo
另一个问题是，如果使用全局变量，当组件在其他地方使用时，该单个变量将可访问组件的所有实例，并且可以被覆盖，逻辑混合，从而产生意外的耦合。