#題引：我認為跟著官方文檔學習不會走歪路

ref使用

組件重新渲染時，react組件函數(shù)里的代碼會重新執(zhí)行，返回新的JSX，當你希望組件“記住”某些信息，但又不想讓這些信息觸發(fā)新的渲染時，你可以使用ref，ref 是一個普通的 JavaScript 對象，具有可以被讀取和修改的current屬性。

import { useRef } from 'react';
const ref = useRef(0);

useRef 返回一個這樣的對象:

{ current: 0 // 你向 useRef 傳入的值
}

更改 ref 不會重新渲染組件，它像一個 React 追蹤不到的、用來存儲組件信息的秘密“口袋”。（這就是讓它成為 React 單向數(shù)據(jù)流的“脫圍機制”的原因），你可以將其視為沒有設置函數(shù)的常規(guī) state 變量。

通常，當你的組件需要“跳出” React 并與外部 API 通信時，你會用到 ref ，以下是這些罕見情況中的幾個：

• 存儲 timeout ID
• 存儲和操作 DOM 元素
• 存儲不需要被用來計算 JSX 的其他對象。

ref和DOM

有時你可能需要訪問由 React 管理的 DOM 元素 —— 例如，讓一個節(jié)點獲得焦點、滾動到它或測量它的尺寸和位置。在 React 中沒有內置的方法來做這些事情，所以你需要一個指向 DOM 節(jié)點的 ref 來實現(xiàn)。

在你的組件中使用它聲明一個 ref：

const myRef = useRef(null);

將 ref 作為 ref 屬性值傳遞給想要獲取的 DOM 節(jié)點的 JSX 標簽：

<div ref={myRef}>

當 React 為這個 div創(chuàng)建一個 DOM 節(jié)點時，React 會把對該節(jié)點的引用放入 myRef.current。然后，你可以從 事件處理器 訪問此 DOM 節(jié)點，并使用在其上定義的內置瀏覽器 API。

// 你可以使用任意瀏覽器 API，例如：
myRef.current.scrollIntoView();

如果你嘗試將 ref 放在你自己的組件上，例如MyInput ，默認情況下你會得到null，控制臺報錯，因為默認情況下，React 不允許組件訪問其他組件的 DOM 節(jié)點。甚至自己的子組件也不行。這是react的安全限制。

非要使用：使用 forwardRef 并將第二個 ref 參數(shù)傳遞給特定節(jié)點來暴露 DOM 節(jié)點

const MyInput = forwardRef((props, ref) => {return <input {...props} ref={ref} />;
});