踩雷react-useRef钩子函数

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

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

一般情况下定义变量都是用的钩子函数useState,但是偶尔会遇到一些异步问题需要在别处缝缝补补,某一天菜鸡本人偶然发现使用useRefcurrent也可以存储和访问DOM元素或者一些其他引用,而且是时实的!然后不管三七二十一,遇到懒得解决的异步问题通通使用useRef,就像如下的代码片段。
在这里插入图片描述
踩雷react-useRef钩子函数_第1张图片
踩雷react-useRef钩子函数_第2张图片
我就忽略一个问题:useRef 创建的引用对象在重新渲染时会保持不变,不会导致组件重新渲染,所以,当我用到antd的table组件,虽然我的 dataSource 属性已经正确绑定到 listDetailRef.current,由于 React 的异步更新机制,就导致了变化会慢一些时间才反映在组件中。

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

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

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

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

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

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

再区别一下useStateuseRef 的作用和用法:

  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

你可能感兴趣的:(react.js,javascript,前端)