在 React 函数式组件中使用 useState, 变量,useRef 的时机
- 变量
变量在每次组件重新渲染的时候都会被重新进行赋值,所以如果你想要保留之前操作的状态的话就不要使用变量
- useState
组件更新不会改变之前的状态,可以保存状态
- 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