建站
咨詢
售后
建站咨詢
Welcome to my blog!
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React高手都善于使用useImprativeHandle
一、useRef
學(xué)習(xí) useImperativeHandle，得從 useRef 說起。我們前面已經(jīng)學(xué)習(xí)過了 useRef，它能夠結(jié)合元素組件的 ref 屬性幫我們拿到該元素組件對應(yīng)的真實(shí) DOM。
成都服務(wù)器托管，成都創(chuàng)新互聯(lián)提供包括服務(wù)器租用、綿陽電信機(jī)房、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、域名與空間等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：028-86922220
例如，我想要拿到一個 input 元素的真實(shí) DOM 對象，并調(diào)用 input 的 .focus() 方法，讓 input 獲得焦點(diǎn)。
import {useRef} from "react";
export default function Demo() {
const inputRef = useRef(null);
const focusTextInput = () => {
if (inputRef.current) {
inputRef.current.focus();
}
}
return (
<>
);
} 每一個 React 提供的元素組件，都具備 ref 屬性。在上面的章節(jié)中我們可以知道，當(dāng)我們拿到了元素的原生 DOM 對象之后，就可以脫離 React 的開發(fā)思路，從而應(yīng)對更多更復(fù)雜的場景。
那么問題就來了，原生組件有自己的 ref 屬性，那么自定義組件呢？當(dāng)然是沒有的，因此我們得自己想辦法處理。
二、forwardRef
forwardRef 能夠在我們自定義組件時，把內(nèi)部組件的 ref 屬性傳遞給父組件。
它接受我們自定義的組件作為參數(shù)，并返回一個新的組件。新組件具備我們自定義組件的全部能力，并得到一個 ref 屬性，父組件通過 useRef 獲取到的內(nèi)容與內(nèi)部組件的 ref 完全一致。
我們來看一個案例。
現(xiàn)在我們要實(shí)現(xiàn)如下效果，當(dāng)點(diǎn)擊 Edit 按鈕時，輸入框自動獲得焦點(diǎn)。
我們知道，在 DOM 中，只要得到 input 對象，然后就可以調(diào)用 .focus() 方法來實(shí)現(xiàn)目標(biāo)?，F(xiàn)在我們要封裝一個自定義的 MyInput 組件，他具備 input 同樣的能力，同時，我們還要封裝一個標(biāo)題進(jìn)去。
我們的代碼如下：
import {forwardRef, LegacyRef} from 'react'
type MyInputProps = React.InputHTMLAttributes & {
label: string
}
function MyInput(props: MyInputProps, ref: LegacyRef) {
const {label, ...other} = props
return (
)
}
export default forwardRef(MyInput) MyInput 在聲明時要傳入兩個參數(shù)，一個 props，一個 ref。通過展開運(yùn)算符，我們能夠確保 MyInput 支持 input 所有的屬性。
封裝好之后，我們就可以在點(diǎn)擊實(shí)踐中，通過 ref 得到的引用去調(diào)用 .focus() 達(dá)到 input 獲取焦點(diǎn)的目標(biāo)。
import { useRef } from 'react'
import MyInput from './MyInput'
export default function ImperativeHandle() {
const ref = useRef(null)
function handleClick() {
ref.current?.focus()
}
return (
)
} 三、useImperativeHandle
在實(shí)踐中，很多時候，我們并不想通過 ref 去獲取子組件內(nèi)部的某個元素組件的真實(shí) DOM 對象。而是希望父組件能夠調(diào)用子組件內(nèi)部的某些方法
但是在 React 中，又無法直接 new 一個子組件的實(shí)例，像面向?qū)ο竽菢油ㄟ^子組件實(shí)例去調(diào)用子組件的方法。
因此，React 提供了一個 hook，useImperativeHandle，讓我們能夠重寫子組件內(nèi)部 ref 對應(yīng)的引用，從而達(dá)到在父組件中，調(diào)用子組件內(nèi)部方法的目的
例如，上面的 MyInput 組件，我們可以修改代碼為：
import {forwardRef, useImperativeHandle, useRef} from 'react'
type MyInputProps = React.InputHTMLAttributes & {
label: string
}
function MyInput(props: MyInputProps, ref: any) {
const {label, ...other} = props
const inputRef = useRef(null)
useImperativeHandle(ref, () => {
return {
focus() {
inputRef.current.focus()
}
}
}, [])
return (
)
}
export default forwardRef(MyInput) useImperativeHandle(
ref,
createHandle,
dependencies?
)useImperativeHandle 接收三個參數(shù)，分別是
- ref: 組件聲明時傳入的 ref。
- createHandle: 回調(diào)函數(shù)，需要返回 ref 引用的對象，我們也是在這里重寫 ref 引用。
- deps: 依賴項(xiàng)數(shù)組，可選。state，props 以及內(nèi)部定義的其他變量都可以作為依賴項(xiàng)，React 內(nèi)部會使用 Object.is 來對比依賴項(xiàng)是否發(fā)生了變化。依賴項(xiàng)發(fā)生變化時，createHandle 會重新執(zhí)行，ref 引用會更新。如果不傳入依賴項(xiàng)，那么每次更新 createHandle 都會重新執(zhí)行。
useImperativeHandle 執(zhí)行本身返回 undefined。
四、官方案例
官方文檔中有這種一個案例，效果如圖所示。當(dāng)點(diǎn)擊按鈕時，我希望下方的 input 自動獲得焦點(diǎn)，并切中間的滾動條滾動到最底部。
現(xiàn)在，我們結(jié)合前面的知識來分析一下這個案例應(yīng)該如何實(shí)現(xiàn)。
首先我們先進(jìn)行組件拆分，將整個內(nèi)容拆分為按鈕部分與信息部分，信息部分主要負(fù)責(zé)信息的暫時與輸入，因此頁面組件大概長這樣。
<>
我們期望點(diǎn)擊按鈕時，信息部分的輸入框自動獲取焦點(diǎn)，信息部分的信息展示區(qū)域能滾動到最底部，因此整個頁面組件的代碼可以表示為如下：
import { useRef } from 'react';
import Post from './Post.js';
export default function Page() {
const postRef = useRef(null);
function handleClick() {
postRef.current.scrollAndFocusAddComment();
}
return (
<>
信息部分 Post 又分為兩個部分，分別是信息展示部分與信息輸入部分。
此時這兩個部分的 ref 要透傳給 Post，并最終再次透傳給頁面組件。
所以信息展示部分 CommentList 組件的代碼為。
import { forwardRef, useRef, useImperativeHandle } from 'react';
const CommentList = forwardRef(function CommentList(props, ref) {
const divRef = useRef(null);
useImperativeHandle(ref, () => {
return {
scrollToBottom() {
const node = divRef.current;
node.scrollTop = node.scrollHeight;
}
};
}, []);
let comments = [];
for (let i = 0; i < 50; i++) {
comments.push(Comment #{i}
);
}
return (
{comments}
);
});
export default CommentList;信息輸入部分 AddComment 的代碼為。
import { forwardRef, useRef, useImperativeHandle } from 'react';
const AddComment = forwardRef(function AddComment(props, ref) {
return ;
});
export default AddComment;Post 要把他們整合起來。
import { forwardRef, useRef, useImperativeHandle } from 'react';
import CommentList from './CommentList.js';
import AddComment from './AddComment.js';
const Post = forwardRef((props, ref) => {
const commentsRef = useRef(null);
const addCommentRef = useRef(null);
useImperativeHandle(ref, () => {
return {
scrollAndFocusAddComment() {
commentsRef.current.scrollToBottom();
addCommentRef.current.focus();
}
};
}, []);
return (
<>
這樣，我們整個案例的代碼就寫完了。useRef、useImprativeHandle、forwardRef 一起配合幫助我們完成了這個功能。
分享題目：React高手都善于使用useImprativeHandle
文章出自：http://www.5511xx.com/article/dhchdge.html
