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