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

Question

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

如果我一直使用这种方法来让被动数据在整个渲染过程中被记忆，会不会是一种反模式？

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

另外我知道我可以使用像 useMemo() 这样的钩子。但是我想知道这样有没有问题

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

Answer 1

是的，不要使用那个方法。

如果值可以更改，您可以设置一个状态来保留这些值：

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-using-ajax-results-to-set-local-state

如果数据不改变你可以在组件内部声明一个变量：

function Component() {

    const cityList = []
        
    ...
}

您引用的钩子useMemo是一个优化。它可以用来避免不必要的计算，因为它存储了一个记忆值。 useMemo 在您有依赖于其他值的昂贵计算时很有用。

查看官方文档：https://reactjs.org/docs/hooks-reference.html#usememo

Answer 2

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

如果您不使用状态，组件将不会使用从您的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）

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

React when to use global variables instead of states

reactjs

react-component