在 React 函数式组件中使用 useState， 变量，useRef 的时机

在 React 函数式组件中使用 useState， 变量，useRef 的时机

1. 变量

变量在每次组件重新渲染的时候都会被重新进行赋值，所以如果你想要保留之前操作的状态的话就不要使用变量

2. useState

组件更新不会改变之前的状态，可以保存状态

3. useRef

也可以保存我们的状态

那么问题来了： 我们什么时候该用 useState 什么时候该用 useRef 呢？

useState: 当我们需要在状态改变的时候重新渲染视图，那么我们就使用 useState 来保存我们的状态

useRef: 如果我们只是想保存状态，而且可以同步更新&获取我们的状态，那么就使用 useRef

useRef 的特点

• 每次渲染 useRef 返回值都不变；

• ref.current 发生变化并不会造成 re-render;

• ref.current 发生变化应该作为 Side Effect（因为它会影响下次渲染），所以不应该在 render 阶段更新 current 属性。

useRef 注意事项：

• ref.current 不可以作为其他 hooks（useMemo, useCallback, useEffect）依赖项；ref.current 的值发生变更并不会造成 re-render, Reactjs 并不会跟踪 ref.current 的变化。

函数组件使用 createRef 不行吗？

createRef 主要解决 class 组件访问 DOM 元素问题，并且最佳实践是在组件周期内只创建一次（一般在构造函数里调用）。如果在函数组件内使用 createRef 会造成每次 render 都会调用 createRef