P09：useRef获取DOM元素和保存变量

Posted 2022-01-08 wgchen~

React Hooks

• 阐述
• useRef 获取DOM元素

阐述

useRef 在工作中虽然用的不多，但是也不能缺少。
它有两个主要的作用：

1、用 useRef 获取 React JSX 中的DOM元素，获取后你就可以控制DOM的任何东西了。
但是一般不建议这样来做，React界面的变化可以通过状态来控制。

2、用 useRef 来保存变量，这个在工作中也很少能用到，我们有了 useContext 这样的保存其实意义不大，但是这是学习，也要把这个特性讲一下。

useRef 获取DOM元素

界面上有一个文本框，在文本框的旁边有一个按钮，当我们点击按钮时，在控制台打印出input的DOM元素，并进行复制到DOM中的value上。

这一切都是通过useRef来实现。

在 /src 文件夹下新建一个 Example9.js 文件，然后先引入 useRef，
编写业务逻辑代码如下:

ReactHooksDemo\\demo01\\src\\Example9.js

import React,  useRef from 'react';

function Example9()
    const inputEl = useRef(null)
    const onButtonClick=()=> 
        inputEl.current.value="Hello ,willem"
        console.log(inputEl) //输出获取到的DOM节点
    
    return (
        <>
            /*保存input的ref到inputEl */
            <input ref=inputEl type="text"/>
            <button onClick = onButtonClick>在input上展示文字</button>
        </>
    )


export default Example9

当点击按钮时，你可以看到在浏览器中的控制台完整的打印出了DOM的所有东西，并且界面上的<input/>框的value值也输出了我们写好的Hello ,willem。

这一切说明我们可以使用useRef获取DOM元素，并且可以通过useRef控制DOM的属性和值。

useRef 保存普通变量

这个操作在实际开发中用的并不多，但我们还是要讲解一下。

就是useRef可以保存React中的变量。

我们这里就写一个文本框，文本框用来改变text状态。

又用 useRef 把 text 状态进行保存，最后打印在控制台上。

写这段代码你会觉的很绕，其实显示开发中没必要这样写，用一个state状态就可以搞定，这里只是为了展示知识点。

接着用useState声明了一个text状态和setText函数。

然后编写界面，界面就是一个文本框。

然后输入的时候不断变化。

ReactHooksDemo\\demo01\\src\\Example10.js

import React,  useRef ,useState,useEffect  from 'react';

function Example10()
    const inputEl = useRef(null)
    const onButtonClick=()=> 
        inputEl.current.value="Hello ,useRef"
        console.log(inputEl)
    
    const [text, setText] = useState('willem')
    return (
        <>
            /*保存input的ref到inputEl */
            <input ref=inputEl type="text"/>
            <button onClick = onButtonClick>在input上展示文字</button>
            <br/>
            <br/>
            <input value=text onChange=(e)=>setText(e.target.value) />
        </>
    )


export default Example10

这时想每次text发生状态改变，保存到一个变量中或者说是useRef中，这时候就可以使用useRef了。

先声明一个textRef变量，他其实就是useRef函数。

然后使用useEffect函数实现每次状态变化都进行变量修改，并打印。最后的全部代码如下。

这时候就可以实现每次状态修改，同时保存到useRef中了，也就是我们说的保存变量的功能。那useRef的主要功能就是获得DOM和变量保存，到这儿，相信你的编码能力又增加了一些，加油吧！