function?WithCreateRef()?{
??const?[minus,?setMinus]?=?useState(0);
??//?每次render都會(huì)重新創(chuàng)建`ref`
??const?ref?=?React.createRef(null);

??const?handleClick?=?()?=>?{
????setMinus(minus?+?1);
??};

??//?這里每次都是`null`
??console.log(`ref.current=${ref.current}`)

??useEffect(()?=>?{
????console.log(`denp[minus]>`,?ref.current?&&?ref.current.innerText);
??},?[minus]);

??return?(
????"App">
??????Num:?{minus}
??????Add
????

二、使用

2.1 基本語(yǔ)法

見鏈接：https://reactjs.org/docs/hooks-reference.html#useref

• 每次渲染useRef返回值都不變；

• ref.current發(fā)生變化并不會(huì)造成re-render;

• ref.current發(fā)生變化應(yīng)該作為Side Effect（因?yàn)樗鼤?huì)影響下次渲染），所以不應(yīng)該在render階段更新current屬性。

  
  

2.2?不可以在render里更新ref.current值

在Is there something like instance variables提到:

Unless you’re doing lazy initialization, avoid setting refs during rendering — this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.

• 在render里更新refs導(dǎo)致什么問題呢？

• 在異步渲染里render階段可能會(huì)多次執(zhí)行。

const?RenderCounter?=?()?=>?{
??const?counter?=?useRef(0);
??
??//?counter.current的值可能增加不止一次
??counter.current?=?counter.current?+?1;
??
??return?(
????
{`The?component?has?been?re-rendered?${counter.current}?times`}

??);
}

2.3?可以在render里更新ref.current值

同樣也是在Is there something like instance variables提到的:

Unless you’re doing lazy initialization, avoid setting refs during rendering — this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.

• 為啥lazy initialization卻可以在render里更新ref.current值？

• 這個(gè)跟useRef懶初始化的實(shí)現(xiàn)方案有關(guān)。

const?instance?=?React.useRef(null)
if?(instance.current?==?null)?{
??instance.current?=?{
????//?whatever?you?need
??}
}

本質(zhì)上只要保證每次render不會(huì)造成意外效果，都可以在render階段更新ref.current。但最好別這樣，容易造成問題，useRef懶初始化畢竟是個(gè)特殊的例外。

2.4ref.current不可以作為其他hooks（useMemo,?useCallback,?useEffect）依賴項(xiàng)

ref.current的值發(fā)生變更并不會(huì)造成re-render, Reactjs并不會(huì)跟蹤ref.current的變化。

function?Minus()?{
??const?[minus,?setMinus]?=?useState(0);
??const?ref?=?useRef(null);

??const?handleClick?=?()?=>?{
????setMinus(minus?+?1);
??};

??console.log(`ref.current=${ref.current?&&?ref.current.innerText}`)

??//?#1?uesEffect
??useEffect(()?=>?{
????console.log(`denp[ref.current]?>`,?ref.current?&&?ref.current.innerText);
??},?[ref.current]);

??//?#2?uesEffect
??useEffect(()?=>?{
????console.log(`denp[minus]>`,?ref.current?&&?ref.current.innerText);
??},?[minus]);

??return?(
????"App">
??????Num:?{minus}
??????Add
????