基于useImperativeHandle的使用解析

更新時間：2022年08月08日 09:30:37 作者：前端精髓

這篇文章主要介紹了基于useImperativeHandle的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

useImperativeHandle的使用

你不能在函數(shù)組件上使用 ref 屬性，因為它們沒有實例：

import React, { Component } from 'react';
function MyFunctionComponent() {
? return <input />
}
class Parent extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.textInput = React.createRef();
? }
? render() {
? ? return (
? ? ? <MyFunctionComponent ref={this.textInput} />
? ? );
? }
}

如果你需要使用 ref，你應(yīng)該將組件轉(zhuǎn)化為一個 class，就像當(dāng)你需要使用生命周期鉤子或 state 時一樣。

不管怎樣，你可以在函數(shù)組件內(nèi)部使用 ref 屬性，只要它指向一個 DOM 元素或 class 組件：

function CustomTextInput(props) {
? // 這里必須聲明 textInput，這樣 ref 才可以引用它
? let textInput = React.createRef();
? function handleClick() {
? ? textInput.current.focus();
? }
? return (
? ? <div>
? ? ? <input
? ? ? ? type="text"
? ? ? ? ref={textInput} />
? ? ? <input
? ? ? ? type="button"
? ? ? ? value="Focus the text input"
? ? ? ? onClick={handleClick}
? ? ? />
? ? </div>
? );
}

在下面的示例中，MyFunctionComponent 使用 React.forwardRef 來獲取傳遞給它的 ref，然后轉(zhuǎn)發(fā)到它渲染的 DOM button：

const MyFunctionComponent = React.forwardRef((props, ref) => (
? <button ref={ref}>
? ? {props.children}
? </button>
))
class Parent extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.textInput = React.createRef();
? }
? componentDidMount() {
? ? console.log(this.textInput.current)
? }
? render() {
? ? return (
? ? ? <MyFunctionComponent ref={this.textInput} />
? ? );
? }
}

第二個參數(shù) ref 只在使用 React.forwardRef 定義組件時存在。常規(guī)函數(shù)和 class 組件不接收 ref 參數(shù)，且 props 中也不存在 ref。

useImperativeHandle

useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值。useImperativeHandle 應(yīng)當(dāng)與 forwardRef 一起使用：

const MyFunctionComponent = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return (
    <input ref={inputRef} />
  )
})
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  componentDidMount() {
    this.textInput.current.focus()
  }
  render() {
    return (
      <MyFunctionComponent ref={this.textInput} />
    );
  }
}

使用useImperativeHandle時父組件第一次沒拿到子組件方法

背景需求

一個tab兩個按鈕A、B，默認選中的A，當(dāng)點擊到B時需要顯示B對應(yīng)的圖表?？紤]到B的圖表在頁面加載時已經(jīng)初始化完成，所以點擊B時再調(diào)用圖表的resize方法。由于tab中的圖表是寫在子組件里，所以通過useImperativeHandle實現(xiàn)父組件調(diào)用子組件方法，React版本"react": "^18.1.0",代碼如下

父組件：

const childRef = useRef()
const item = [{
? ? ? ? name: 'XXXX',
? ? ? ? content: <RunningRecord cRef={childRef} />,
? ? ? ? handClick: childRef.current?.resizeChart
}]
return <>
? ? ……
? ? <li onClick={() => {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? console.log('~~item.handClick',item.handClick)
? ? ? ? ? ? ? ? item.handClick?.()
? ? ? ? ? ? }, 200)
? ? ? ? }}
? ? ? ? key={item.name}>
? ? ? ? {item.name}
? ? </li>
? ? ……
? ? <RunningRecord cRef={childRef} />
</>

子組件：

function RunningRecord({ cRef }) {
? ? ……
? ? useImperativeHandle(cRef,()=>({
? ? ? ? resizeChart:()=> {dosomething……}
? ? }))

問題

這樣寫在本地開發(fā)模式中正常運行，但生產(chǎn)環(huán)境中父組件首次加載不能拿到子組件的方法，需tab切換到A再次且到B才行。猜想原因，大概在生產(chǎn)環(huán)境中，父組件把子組件暴露出來的方法綁定到UI中的點擊事件中，而子組件初始化的時機晚，初始完成后并沒有把事件傳回來。

這個猜想不一定準(zhǔn)確，歡迎知道的小伙伴們補充。

解決方法

在父組件中，將子組件賦值的過程放在useEffect中，不寫依賴項參數(shù)(不是沒有依賴的空數(shù)組)，再運行，一切正常。

const usageRecordData = [{
? ? name: 'XXXX',
? ? content: <RunningRecord cRef={childRef} />,
}]
useEffect(() => {
? ? usageRecordData[1].handClick = childRef.current?.resizeChart
})

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: