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