前言

hello world歡迎來到前端的新世界

---

😜當(dāng)前文章系列專欄：前端面試
🐱?👓博主在前端領(lǐng)域還有很多知識(shí)和技術(shù)需要掌握，正在不斷努力填補(bǔ)技術(shù)短板。(如果出現(xiàn)錯(cuò)誤，感謝大家指出)🌹
💖感謝大家支持！您的觀看就是作者創(chuàng)作的動(dòng)力

介紹

forwardRef 和 memo 是 React 中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù)。

forwardRef

forwardRef：通常情況下，父組件通過 ref 屬性傳遞給子組件的引用只能是 DOM 元素或類組件的實(shí)例。但有時(shí)候我們希望將 ref 傳遞給函數(shù)組件內(nèi)部的某個(gè)具體元素或組件，這時(shí)就可以使用 forwardRef。

forwardRef 可以傳遞一個(gè)回調(diào)函數(shù)來獲取從父組件傳遞過來的 ref，并將其傳遞給內(nèi)部的某個(gè)特定元素或組件。這樣，在父組件中使用 ref 引用子組件時(shí)，實(shí)際上獲取到的是子組件內(nèi)部指定的元素或組件。

const MyComponent = React.forwardRef((props, ref) => (<div ref={ref}>{/* 組件內(nèi)容 */}</div>
));

舉個(gè)例子

const ParentComponent = () => {const childRef = useRef();useEffect(() => {console.log(childRef.current); // 子組件內(nèi)指定的元素或組件}, []);return (<div><MyComponent ref={childRef} /></div>);
};

memo

memo：memo 是用于優(yōu)化函數(shù)組件的渲染性能的高階函數(shù)。它可以包裹一個(gè)函數(shù)組件，并返回一個(gè)經(jīng)過優(yōu)化的組件。

memo 會(huì)對(duì)函數(shù)組件的輸入屬性進(jìn)行淺比較，如果輸入屬性沒有發(fā)生變化，那么組件就不會(huì)重新渲染。只有當(dāng)輸入屬性發(fā)生變化時(shí)，memo 才會(huì)重新調(diào)用函數(shù)組件進(jìn)行渲染。

const MemoizedComponent = React.memo(MyComponent);

舉個(gè)例子

const MyComponent = ({ text }) => {// 組件邏輯return <div>{text}</div>;
};const MemoizedComponent = React.memo(MyComponent);const ParentComponent = () => {const [text, setText] = useState('Hello');useEffect(() => {setTimeout(() => {setText('Hello, World!');}, 1000);}, []);return <MemoizedComponent text={text} />;
};

適用場(chǎng)景

forwardRef 的適用場(chǎng)景

• 當(dāng)你需要在父組件中直接操作子組件內(nèi)部的特定元素或組件時(shí)，可以使用 forwardRef 將 ref 傳遞到函數(shù)組件內(nèi)部的特定元素或組件中。
• 例如，如果你希望在父組件中調(diào)用子組件的方法、訪問子組件的某個(gè) DOM 元素或組件實(shí)例等，就可以使用 forwardRef 來實(shí)現(xiàn)。
• 在這種情況下，forwardRef 可以提高代碼的可維護(hù)性和可讀性，使父組件更方便地控制子組件。

memo 的適用場(chǎng)景

• 當(dāng)組件的輸入屬性沒有發(fā)生變化時(shí)不希望重新渲染組件時(shí)，可以使用 memo 進(jìn)行組件的淺比較。
  = 通過避免不必要的重復(fù)渲染，memo 可以顯著提高組件的渲染性能，減少不必要的 DOM 操作，改善用戶體驗(yàn)。
• memo 適用于純展示型組件或受控組件等，在這些組件中，輸入屬性的變化不會(huì)導(dǎo)致組件內(nèi)部狀態(tài)的改變，也不會(huì)引起副作用。

優(yōu)點(diǎn)缺點(diǎn)

forwardRef 的優(yōu)點(diǎn)：

提供了一種簡(jiǎn)單的方式將 ref 傳遞給函數(shù)組件內(nèi)部的特定元素或組件。
可以讓父組件更方便地操作子組件內(nèi)部的特定元素或組件，提高了代碼的可維護(hù)性和可讀性。

forwardRef 的缺點(diǎn)：

增加了組件層級(jí)，可能會(huì)導(dǎo)致額外的性能開銷。
可能會(huì)破壞組件的封裝性，使組件與父組件之間產(chǎn)生緊密耦合。

memo 的優(yōu)點(diǎn)：

通過淺比較可以避免不必要的組件渲染，提高了組件的性能。
對(duì)于純展示型組件或受控組件等，可以有效減少不必要的 DOM 操作，改善用戶體驗(yàn)。

memo 的缺點(diǎn)：

僅適用于基于輸入屬性的淺比較，如果組件的渲染依賴于其他因素（如上下文、狀態(tài)等），則可能無法發(fā)揮優(yōu)化作用。
使用 memo 進(jìn)行淺比較會(huì)引入一定的計(jì)算開銷，對(duì)于簡(jiǎn)單的組件可能不值得使用。

后言

創(chuàng)作不易，要是本文章對(duì)廣大讀者有那么一點(diǎn)點(diǎn)幫助 不妨三連支持一下，您的鼓勵(lì)就是博主創(chuàng)作的動(dòng)力