在 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
网友评论