1、你想知道的關(guān)于 refs 的知識都在這了refs 用法場景 在某些狀況下，我們需要在典型數(shù)據(jù)流之外強制修改子組件，被修改的子組件可能是一個 react 組件的實例，也可能是一個 dom 元素，例如: 管理焦點，文本挑選或媒體播放。 觸發(fā)強制動畫。 集成第三方 dom 庫。 設(shè)置 refs 1. createref 支持在函數(shù)組件和類組件內(nèi)部用法 createref 是 react16.3 版本中引入的。 創(chuàng)建 refs 用法 react.createref() 創(chuàng)建 refs，并通過 ref 屬性附加至 react 元素上。通常在構(gòu)造函數(shù)中，將 refs 分配給實例屬性，以便在囫圇組件中引用。

2、 拜訪 refs 當(dāng) ref 被傳遞給 render 中的元素時，對該節(jié)點的引用可以在 ref 的 current 屬性中拜訪。 import react from &39;react&39; export default class myinput extends react.component constructor(props) super(props); /分配給實例屬性 this.inputref = react.createref(null); componentdidmount() /通過 this.inputref.current 獵取對該節(jié)點的引用 this.

3、inputref && this.inputref.current.focus(); render() /把 ref 關(guān)聯(lián)到構(gòu)造函數(shù)中創(chuàng)建的 ——inputref—— 上 return ( ) ref 的值按照節(jié)點的類型而有所不同： 當(dāng) ref 屬性用于 html 元素時，構(gòu)造函數(shù)中用法 react.createref() 創(chuàng)建的 ref 接收底層 dom 元素作為其 current 屬性。 當(dāng) ref 屬性用于自定義的 class 組件時， ref 對象接收組件的掛載實例作為其 c

4、urrent 屬性。 不能在函數(shù)組件上用法 ——ref—— 屬性，由于函數(shù)組件沒有實例。 總結(jié)：為 dom 添加 ref，那么我們就可以通過 ref 獵取到對該dom節(jié)點的引用。而給react組件添加 ref，那么我們可以通過 ref 獵取到該組件的實例【不能在函數(shù)組件上用法 ref 屬性，由于函數(shù)組件沒有實例】。 2. useref 僅限于在函數(shù)組件內(nèi)用法 useref 是 react16.8 中引入的，只能在函數(shù)組件中用法。 創(chuàng)建 refs 用法 react.useref() 創(chuàng)建 refs，并通過 ref 屬

5、性附加至 react 元素上。 const refcontainer = useref(initialvalue); useref 返回的 ref 對象在組件的囫圇生命周期內(nèi)保持不變。 拜訪 refs 當(dāng) ref 被傳遞給 react 元素時，對該節(jié)點的引用可以在 ref 的 current 屬性中拜訪。 import react from &39;react&39; export default function myinput(props) const inputref = react.useref(null); react.useeffect() => inputr

6、ef.current.focus(); ); return ( ) 關(guān)于 react.useref() 返回的 ref 對象在組件的囫圇生命周期內(nèi)保持不變，我們來和 react.createref() 來做一個對照，代碼如下： import react, useref, useeffect, createref, usestate from &39;react&39; function myinput() let count, setcount = usestate(0); const myref = createref(null); const inputref = user

7、ef(null); /僅執(zhí)行一次 useeffect() => inputref.current.focus(); window.myref = myref; window.inputref = inputref; , ); useeffect() => /除了第一次為true， 其它每次都是 false 【createref】 console.log(&39;myref = window.myref&39;, myref = window.myref); /始終為true 【useref】 console.log(&39;inputref = window

8、.inputref&39;, inputref = window.inputref); ) return ( setcount(count+1)>count ) 3. 回調(diào) refs 支持在函數(shù)組件和類組件內(nèi)部用法 react 支持 回調(diào) refs 的方式設(shè)置 refs。這種方式可以協(xié)助我們更精細(xì)的控制何時 refs 被設(shè)置和解除。 用法 回調(diào) refs 需要將回調(diào)函數(shù)傳遞給 react元素 的 ref 屬性。這個函數(shù)接受 react 組件實例 或 html dom 元素作為參數(shù)，將其掛載到實例屬性上，如下所示： import react from &39;react&39; export default class myinput extends react.component constructor(props) super(props); this.inputref = null; this.settextinputref = (ele) => this.inputref = ele; componentdidmount() this.inputref && this.inputref.focus(); render() return ( ) re