踩雷react-useRef钩子函数

今天测试提了一个bug，之前做的有个需求，在触发事件发起请求后，成功响应返回的新的数据没有第一时间渲染到网页上。

方法也都成功更新了数据，就是渲染会慢1-2分钟，排错排了老半天，最后找到了原因。

一般情况下定义变量都是用的钩子函数useState，但是偶尔会遇到一些异步问题需要在别处缝缝补补，某一天菜鸡本人偶然发现使用useRef的current也可以存储和访问DOM元素或者一些其他引用，而且是时实的！然后不管三七二十一，遇到懒得解决的异步问题通通使用useRef，就像如下的代码片段。



我就忽略一个问题：useRef 创建的引用对象在重新渲染时会保持不变，不会导致组件重新渲染，所以，当我用到antd的table组件，虽然我的 dataSource 属性已经正确绑定到 listDetailRef.current，由于 React 的异步更新机制，就导致了变化会慢一些时间才反映在组件中。

React 通常会采用异步方式来处理状态和属性的变化，以提高性能和效率。

当更新 listDetailRef.current 中的数据时，React 不会立即触发重新渲染。相反，它会将更新放入更新队列中，并在适当的时候批量处理这些更新。这就导致了更新在稍后的某个时刻才会反映在组件中。

至于我先前提到的useState异步问题的解决，我大错特错了，useRef 的 current 属性是不能直接解决使用 useState 时可能遇到的异步问题的！因为它们有不同的用途和行为…

1. useState 异步更新：useState 异步地更新组件的状态。这意味着当你调用 setState 更新状态时，React 并不会立即重新渲染组件。这可能会导致在某些情况下，你访问的状态值不会立即反映最新的值。
2. useRef 不会触发重新渲染：useRef 创建的引用对象的 current 属性是可变的，但它的更新不会触发组件重新渲染。因此，useRef 不会解决 useState 的异步更新问题。

总的来说，useState 用于管理组件的状态，而 useRef 用于在组件渲染期间保持某些值的引用。useState 会引发组件重新渲染，而 useRef 不会。

咱就是说，还是官方说怎么用就怎么用吧……

再区别一下useState 和 useRef 的作用和用法：

1. useState:
   • useState 用于在函数组件中添加状态(state)。通过调用 useState(initialValue)，你可以创建一个状态变量，并将其与初始值关联。
   • 当状态变量发生变化时，组件将会重新渲染以反映最新的状态。
   • 例子：const [count, setCount] = useState(0) 会创建一个名为 count 的状态变量，并将其初始值设为 0。
2. useRef:
   • useRef 用于在函数组件中创建一个可变的对象引用，通常用于引用 DOM 元素或其他 React 组件。
   • 不同于状态变量，useRef 创建的引用对象在重新渲染时保持不变，不会导致组件重新渲染。
   • 例子：const myRef = useRef(initialValue) 会创建一个 myRef 对象，并将其初始值设为 initialValue。