快捷導(dǎo)航

React Refs轉(zhuǎn)發(fā)實現(xiàn)流程詳解

更新時間：2022年12月03日 10:50:44 作者：碼農(nóng)小菲

Refs是一個獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關(guān)于React中refs的一些常見用法,需要的朋友可以參考下

Refs轉(zhuǎn)發(fā)

概述

將ref自動地通過組件傳遞到子組件的技巧
父組件可以通過ref操作子組件，直接使用子組件的DOM

轉(zhuǎn)發(fā)refs到DOM組件

渲染原生 DOM 元素 button 的 FancyButton 組件（子組件）

function FancyButton(props) {
  return (
    <button className="FancyButton">
      {props.children}
    </button>
  )
}

Ref 轉(zhuǎn)發(fā)是一個可選特性，其允許某些組件接收 ref，并將其向下傳遞給子組件

//子組件
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
))
//父組件
//可以直接獲取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
//這樣，在父組件中可以直接使用DOM button

以下是對上述示例發(fā)生情況的逐步解釋：

通過調(diào)用 React.createRef 創(chuàng)建了一個 React ref 并將其賦值給 ref 變量
指定 ref 為 JSX 屬性，將其向下傳遞給 FancyButton React
傳遞ref給forwardRef作為其第二個參數(shù)
向下轉(zhuǎn)發(fā)ref參數(shù)到button，并將其指定為JSX屬性
當(dāng)ref掛載完成，ref.current將指向button DOM節(jié)點

組件庫維護(hù)者的注意事項

當(dāng)使用forwardRf時，應(yīng)將其視為一個新的主版本

在高階組件中轉(zhuǎn)發(fā)refs

轉(zhuǎn)發(fā)ref對高階組件是很有用的，讓我們從一個輸出組件props到控制臺的高階組件為例

 function logProps(WrappedComponent) {
   class LogProps extends React.Component {
     componentDidUpdate(prevProps) {
       console.log('old props:', prevProps);
       console.log('new props:', this.props);
     }
     render() {
       return <WrappedComponent {...this.props} />;
     }
   }
   return LogProps;
 }

logProps組件是一個高階組件，props將會傳遞到其包裹的組件。這個高階組件可以記錄所有傳遞到fancyButton組件的props

class FancyButton extends React.Component {
     focus() {
       // ...
     }
     // ...
}
   // 我們導(dǎo)出 LogProps，而不是 FancyButton。
   // 雖然它也會渲染一個 FancyButton。
   export default logProps(FancyButton)

需要注意：refs 將不會透傳下去。這是因為 ref 不是 prop 屬性。就像 key 一樣，其被 React 進(jìn)行了特殊處理

如果對 HOC 添加 ref，該 ref 將引用最外層的容器組件，而不是被包裹的組件

意味著用于我們 FancyButton 組件的 refs 實際上將被掛載到 LogProps 組件

   import FancyButton from './FancyButton';
   const ref = React.createRef();
   // 我們導(dǎo)入的 FancyButton 組件是高階組件（HOC）LogProps。
   // 盡管渲染結(jié)果將是一樣的，
   // 但我們的 ref 將指向 LogProps 而不是內(nèi)部的 FancyButton 組件！
   // 這意味著我們不能調(diào)用例如 ref.current.focus() 這樣的方法
   <FancyButton
     label="Click Me"
     handleClick={handleClick}
     ref={ref}
   />;

解決辦法：可以使用 React.forwardRef API 明確地將 refs 轉(zhuǎn)發(fā)到內(nèi)部的 FancyButton 組件。React.forwardRef 接受一個渲染函數(shù)，其接收 props 和 ref 參數(shù)并返回一個 React 節(jié)點

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }
    render() {
      const {forwardedRef, ...rest} = this.props;

      // 將自定義的 prop 屬性 “forwardedRef” 定義為 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }
  // 注意 React.forwardRef 回調(diào)的第二個參數(shù) “ref”。
  // 我們可以將其作為常規(guī) prop 屬性傳遞給 LogProps，例如 “forwardedRef”
  // 然后它就可以被掛載到被 LogProps 包裹的子組件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

在 DevTools 中顯示自定義名稱

下面的組件將在DevTools中顯示為“ForwardRef”

const WrappedComponent = React.forwardRef((props, ref) => {
  return <LogProps {...props} forwardedRef={ref} />;
})

如果命名了渲染函數(shù)，DevTools 也將包含其名稱（例如 “ForwardRef(myFunction)”）

const WrappedComponent = React.forwardRef(
  function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
)

設(shè)置函數(shù)的 displayName 屬性來包含被包裹組件的名稱

function logProps(Component) {
  class LogProps extends React.Component {
    // ...
  }
  function forwardRef(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
  // 在 DevTools 中為該組件提供一個更有用的顯示名。
  // 例如 “ForwardRef(logProps(MyComponent))”
  const name = Component.displayName || Component.name;
  forwardRef.displayName = `logProps(${name})`;
  return React.forwardRef(forwardRef);
}

到此這篇關(guān)于React Refs轉(zhuǎn)發(fā)實現(xiàn)流程詳解的文章就介紹到這了,更多相關(guān)React Refs轉(zhuǎn)發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: