react获取地址栏参数（react useref获取dom元素）

大家好，我是讯享网，很高兴认识大家。

写在前面：万年鸽王回来了😁😁😁，记得我上次更文还是在上次。本想着过完年好好输出输出，结果这一歇就把人歇懒了。害，还是要时刻保持学习呐，更文不能停！！！上一篇useEffect里我说了要解释下capture value 特性，这个其实一句话来说就是拿了 props或者state的快照，导致每次要做处理的时候都是用的某一刻state的快照在处理，这样就导致我们获取不到最新的值来进行更新页面。解决办法也简单：一种是加依赖项；另一种就是利用本篇useRef的一个特性：在任一地方取useRef保存的值都是取最新的！！好了，废话不多说，进入本次useRef的学习🐻‍🐰

讯享网

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

补充： useRef 设定的值进行重新赋值时是不会引发组件的重新渲染的。如果变量不涉及页面展示只是用来查询值时，此变量就可以用 useRef 进行保存；例如：在进行数据请求时，我们往往要进行处理入参，此时入参就可以用useRef进行保存。有小伙伴可能会问为什么不用state来进行设置。这里我们要注意区分何时用state—>若我们设置的变量是需要在页面渲染展示的、或者我们设置的此值变化要引起重新渲染时，我们再使用useState。否则，引入太多state会造成不必要的rerender。

1 useRef 的作用

用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了。
用useRef来保存变量，注意：useRef 每次都会返回相同的引用
可以用来生成对 DOM 对象的引用。

2 useRef 获取DOM 元素

需求说明：界面上有一个文本框，在文本框的旁边有一个按钮，当我们点击按钮时，在控制台打印出input的DOM元素，并进行复制到DOM中的value上。这一切都是通过useRef来实现。

讯享网

代码分析：useRef 返回的值传递给组件或者 DOM 的 ref 属性，就可以通过 ref.current 值访问组件或真实的 DOM 节点，从而可以对 DOM 进行一些操作，比如监听事件等等。这个利用useRef获取DOM元素的操作可以类比vue中利用ref属性进行相应的获取DOM元素或组件进行理解；

3 利用useRef 保存普通变量

代码片段

这时候就可以实现每次状态修改，同时保存到useRef中了。也就是我们说的保存变量的功能。

3.1 useRef 可以绕过Capture Value 的特性 (非常重要): 也就是说，ref不会受到闭包影响，声明过ref后，在之后拿此ref值时拿到的都是最新的ref

注意： useRef 在 react hook 中的作用，就像一个盒子, 你可以存放任何东西，useRef 每次都会返回相同的引用；利用 useRef 可以绕过React Hooks 中的 Capture Value 的特性，可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最新状态，而不会在每个 Render 间存在快照。

注意：React Hooks 中存在 Capture Value 的特性：

讯享网

对Capture Value 特性的分析：在点击 Send 按钮后，再次修改输入框的值，3 秒后的输出依然是点击前输入框的值。这就是所谓的 capture value 的特性。而在类组件中不会出现这种情况，在 3 秒后输出的就是修改后的值，因为这时候 message 是挂载在 this 变量上，它保留的是一个引用值，对 this 属性的访问都会获取到最新的值。此时我们可以用 useRef 来创建一个引用，就可以有效规避 React Hooks 中 Capture Value 特性。

只要将赋值与取值的对象变成 useRef，而不是 useState，就可以躲过 capture value 特性，在 3 秒后得到最新的值。

补充： 当我们使用useRef来保存值时，一定要注意初始值设置里不能用函数来进行赋值，因为这样会造车每次render此函数都会执行。下面请看demo

讯享网

react获取地址栏参数（react useref获取dom元素）

1 useRef 的作用

2 useRef 获取DOM 元素

3 利用useRef 保存普通变量

3.1 useRef 可以绕过Capture Value 的特性 (非常重要): 也就是说，ref不会受到闭包影响，声明过ref后，在之后拿此ref值时拿到的都是最新的ref

相关推荐