日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?Refs轉發實現流程詳解_React

作者：碼農小菲 ? 更新時間： 2022-12-30 編程語言

Refs轉發

概述

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

轉發refs到DOM組件

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

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

Ref 轉發是一個可選特性，其允許某些組件接收 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

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

  • 通過調用 React.createRef 創建了一個 React ref 并將其賦值給 ref 變量
  • 指定 ref 為 JSX 屬性，將其向下傳遞給 FancyButton React
  • 傳遞ref給forwardRef作為其第二個參數
  • 向下轉發ref參數到button，并將其指定為JSX屬性
  • 當ref掛載完成，ref.current將指向button DOM節點

組件庫維護者的注意事項

當使用forwardRf時，應將其視為一個新的主版本

在高階組件中轉發refs

轉發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() {
       // ...
     }
     // ...
}
   // 我們導出 LogProps，而不是 FancyButton。
   // 雖然它也會渲染一個 FancyButton。
   export default logProps(FancyButton)

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

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

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

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

解決辦法：可以使用 React.forwardRef API 明確地將 refs 轉發到內部的 FancyButton 組件。React.forwardRef 接受一個渲染函數，其接收 props 和 ref 參數并返回一個 React 節點

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 回調的第二個參數 “ref”。
  // 我們可以將其作為常規 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} />;
})

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

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

設置函數的 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);
}

原文鏈接：https://blog.csdn.net/xbczrz/article/details/128083925

欄目分類
最近更新