useRef获取DOM元素和保存变量（十）

useRef在工做中虽然用的很少，可是也不能缺乏。它有两个主要的做用:

• 用useRef获取React JSX中的DOM元素，获取后你就能够控制DOM的任何东西了。可是通常不建议这样来做，React界面的变化能够经过状态来控制。

• 用useRef来保存变量，这个在工做中也不多能用到，咱们有了useContext这样的保存其实意义不大，可是这是学习，也要把这个特性讲一下。

useRef获取DOM元素

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

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

import React, { useRef} from 'react';
function Example8(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,JSPang"
        console.log(inputEl) //输出获取到的DOM节点
    }
    return (
        <>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick}>在input上展现文字</button>
        </>
    )
}
export default Example8

当点击按钮时，你能够看到在浏览器中的控制台完整的打印出了DOM的全部东西，而且界面上的<input/>框的value值也输出了咱们写好的Hello ,JSPang。这一切说明咱们可使用useRef获取DOM元素，而且能够经过useRefu控制DOM的属性和值。

useRef保存普通变量

这个操做在实际开发中用的并很少，但咱们仍是要讲解一下。就是useRef能够保存React中的变量。咱们这里就写一个文本框，文本框用来改变text状态。又用useRef把text状态进行保存，最后打印在控制台上。写这段代码你会觉的很绕，其实显示开发中不必这样写，用一个state状态就能够搞定，这里只是为了展现知识点。

接着上面的代码来写，就不必从新写一个文件了。先用useState声明了一个text状态和setText函数。而后编写界面，界面就是一个文本框。而后输入的时候不断变化。

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

function Example8(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,useRef"
        console.log(inputEl)
    }
    const [text, setText] = useState('jspang')
    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 Example8

这时想每次text发生状态改变，保存到一个变量中或者说是useRef中，这时候就可使用useRef了。先声明一个textRef变量，他其实就是useRef函数。而后使用useEffect函数实现每次状态变化都进行变量修改，并打印。最后的所有代码以下。

import React, { useRef ,useState,useEffect } from 'react';
function Example8(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,useRef"
        console.log(inputEl)
    }
    //-----------关键代码--------start
    const [text, setText] = useState('jspang')
    const textRef = useRef()

    useEffect(()=>{
        textRef.current = text;
        console.log('textRef.current:', textRef.current)
    })
    //----------关键代码--------------end
    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 Example8

这时候就能够实现每次状态修改，同时保存到useRef中了。也就是咱们说的保存变量的功能。那useRef的主要功能就是得到DOM和变量保存，咱们都已经讲过了。你的编码能力有增长了一些，让咱们一块儿加油。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html