useRef 與 useState 的區(qū)別

一般在使用react-hook的時(shí)候，我們用到最多的就是定義變量，以及對(duì)應(yīng)的修改變量
下面是一個(gè)最基本的 react-hook 應(yīng)用程序

const Home = () => {
	const [username, setUserName] = useState('');
	
	return （
		<input 
			value={username}
			onChange={(e) => setUserName(e.target.value)}
		/>
	）
}

以上并不是以使用useState的方式來進(jìn)行對(duì)useRef的襯托，兩者功能是不同的，只是便于區(qū)分

但是如果我想讓瀏覽器渲染的時(shí)候，讓他的次數(shù)自增，這樣就會(huì)有一些意想不到的隱患…
如下代碼所示，當(dāng)我使用 useEffect 鉤子進(jìn)行input值渲染的時(shí)候，他的狀態(tài)會(huì)發(fā)生改變，然后又會(huì)重新渲染，狀態(tài)又重新改變，于是就這樣無限循環(huán)下去…

const Home = () => {
	const [username, setUserName] = useState('');
	
	useEffect(() => { // useEffect 頁面渲染時(shí)所調(diào)用的鉤子
		setUserName(username => username + 1);
	}, [username])
	
	return （
		<input 
			value={username} // 循環(huán)...循環(huán)...循環(huán)
		/>
	）
}

useRef 的 用法以及特性

介紹： useRef 是一個(gè) React Hook，它能讓你引用一個(gè)不需要渲染的值。

使用 useRef 可以返回一個(gè)只有一個(gè)屬性的對(duì)象： current，從一開始，他會(huì)是你傳遞的 initial Value, 之后，如果你需要，可以修改它(ref.current)， 如果或他是一個(gè)需要你渲染的對(duì)象，那么你將不應(yīng)該去修改它。

這可能會(huì)讓你想起 useState，但是useRef是可變的， useRef值不會(huì)觸發(fā)react渲染機(jī)制， 因?yàn)樗旧砭褪且粋€(gè)再普通不過的javascript對(duì)象。這意味著 ref 是存儲(chǔ)一些不影響組件視圖輸出的信息的完美選擇！

官方文檔注意：
除了 初始化 外不要在渲染期間寫入 或者讀取 ref.current。這會(huì)使你的組件的行為不可預(yù)測(cè)。

在嚴(yán)格模式下，React 將會(huì) 調(diào)用兩次組件方法，這是為了 幫助你發(fā)現(xiàn)意外的問題。這只是開發(fā)模式下的行為，不影響生產(chǎn)模式。每個(gè) ref 對(duì)象將會(huì)創(chuàng)建兩次，但是其中一個(gè)版本將被丟棄。如果你的組件函數(shù)是純的（應(yīng)該如此），這不會(huì)影響其行為。

useRef(initialValue)
在你組件的頂層調(diào)用 useRef 聲明一個(gè) ref。

import React, { useRef } from 'react'

const useRefTest = () => {
   const pNum = useRef(0)
   ...
}

useRef 會(huì)返回單個(gè) current

current: 0

通過使用 ref，你可以確保：

• 你可以在重新渲染之間 存儲(chǔ)信息（不像是普通對(duì)象，每次渲染都會(huì)重置）。
• 改變它 不會(huì)觸發(fā)重新渲染（不像是 state 變量，會(huì)觸發(fā)重新渲染）。
• 對(duì)于你的組件的每個(gè)副本來說，這些信息都是本地的（不像是外面的變量，是共享的）。

通過 ref 操作 DOM

使用 ref 操作 DOM 是非常常見的。React 內(nèi)置了對(duì)它的支持。

首先，聲明一個(gè) initial value 為 null 的 ref 對(duì)象

import React, { useRef } from 'react'

const test = () => {
  const defaultDom = useRef(null)
}

然后將你的 ref 對(duì)象作為 ref 屬性傳遞給你想要操作的 DOM 節(jié)點(diǎn)的 JSX

import React, { useRef } from 'react'

const test = () => {
  const defaultDom = useRef(null)

  return (
  <>
	 <input ref={defaultDom} />
	 <button onClick={handleClick}>foucs the input!</button>
  </>
  )
}

當(dāng) React 創(chuàng)建 DOM 節(jié)點(diǎn)并將其渲染到屏幕時(shí)，React 將會(huì)把 DOM 節(jié)點(diǎn)設(shè)置為你的 ref 對(duì)象的 current 屬性?，F(xiàn)在你可以訪問 的 DOM 節(jié)點(diǎn)，并且可以調(diào)用類似于 focus() 的方法 (獲取input輸入框的焦點(diǎn))：

  const handleClick = () => {
    defaultDom.current.focus()
  }

文章來源地址http://www.zghlxwxcb.cn/news/detail-428292.html

更多請(qǐng)參考官方文檔！

到了這里，關(guān)于[React] useRef用法和特性的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！