React高級指引之Refs and the DOM使用時機詳解

更新時間：2023年02月10日 13:59:03 作者：碼農(nóng)小菲

在典型的React數(shù)據(jù)流中，props是父組件與子組件交互的唯一方式。要修改一個子組件，你需要使用新的props來重新渲染它。但是，在某些情況下，你需要在典型數(shù)據(jù)流之外強制修改子組件

Refs and the DOM

Refs 提供了一種方式，允許我們訪問 DOM 節(jié)點或在 render 方法中創(chuàng)建的 React 元素
在某些情況下，需要在典型數(shù)據(jù)流之外強制修改子組件。被修改的子組件可能是一個 React 組件的實例，也可能是一個 DOM 元素。

何時使用 Refs

管理焦點，文本選擇或媒體播放
觸發(fā)強制動畫
集成第三方 DOM 庫

勿過度使用 Refs

創(chuàng)建 Refs

React.createRef()創(chuàng)建
通過 ref 屬性附加到 React 元素

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

訪問 Refs

在 ref 的 current 屬性中被訪問

const node = this.myRef.current;

為 DOM 元素添加 ref

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 創(chuàng)建一個 ref 來存儲 textInput 的 DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }
  focusTextInput() {
    // 直接使用原生 API 使 text 輸入框獲得焦點
    // 注意：我們通過 "current" 來訪問 DOM 節(jié)點
    this.textInput.current.focus();
  }
  render() {
    // 告訴 React 我們想把 <input> ref 關(guān)聯(lián)到
    // 構(gòu)造器里創(chuàng)建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

為 class 組件添加 Ref

  class AutoFocusTextInput extends React.Component {
    constructor(props) {
      super(props);
      this.textInput = React.createRef();
    }
    componentDidMount() {
      this.textInput.current.focusTextInput();
    }
    render() {
      return (
        <CustomTextInput ref={this.textInput} />
      );
    }
  }

不能在函數(shù)組件上使用 ref 屬性,如果要在函數(shù)組件中使用 ref，你可以使用 forwardRef（可與 useImperativeHandle 結(jié)合使用），或者可以將該組件轉(zhuǎn)化為 class 組件

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

將 DOM Refs 暴露給父組件

不建議暴露 DOM 節(jié)點

回調(diào) Refs

另一種設(shè)置 refs 的方式，稱為“回調(diào) refs”.
能助你更精細地控制何時 refs 被設(shè)置和解除
不同于傳遞 createRef() 創(chuàng)建的 ref 屬性，你會傳遞一個函數(shù)。這個函數(shù)中接受 React 組件實例或 HTML DOM 元素作為參數(shù)，以使它們能在其他地方被存儲和訪問

    class CustomTextInput extends React.Component {
     constructor(props) {
       super(props);
       this.textInput = null;
       this.setTextInputRef = element => {
         this.textInput = element;
       };
       this.focusTextInput = () => {
         // 使用原生 DOM API 使 text 輸入框獲得焦點
         if (this.textInput) this.textInput.focus();
       };
     }
     componentDidMount() {
       // 組件掛載后，讓文本框自動獲得焦點
       this.focusTextInput();
     }
     render() {
       // 使用 `ref` 的回調(diào)函數(shù)將 text 輸入框 DOM 節(jié)點的引用存儲到 React
       // 實例上（比如 this.textInput）
       return (
         <div>
           <input
             type="text"
             ref={this.setTextInputRef}
           />
           <input
             type="button"
             value="Focus the text input"
             onClick={this.focusTextInput}
           />
         </div>
       );
     }
   }
// 在上面的例子中，Parent 把它的 refs 回調(diào)函數(shù)當作 inputRef props 傳遞給了 CustomTextInput，而且 CustomTextInput 把相同的函數(shù)作為特殊的 ref 屬性傳遞給了 <input>。結(jié)果是，在 Parent 中的 this.inputElement 會被設(shè)置為與 CustomTextInput 中的 input 元素相對應(yīng)的 DOM 節(jié)點

如果 ref 回調(diào)函數(shù)是以內(nèi)聯(lián)函數(shù)的方式定義的，在更新過程中它會被執(zhí)行兩次，第一次傳入?yún)?shù) null，然后第二次會傳入?yún)?shù) DOM 元素。這是因為在每次渲染時會創(chuàng)建一個新的函數(shù)實例，所以 React 清空舊的 ref 并且設(shè)置新的。通過將 ref 的回調(diào)函數(shù)定義成 class 的綁定函數(shù)的方式可以避免上述問題，但是大多數(shù)情況下它是無關(guān)緊要的。

到此這篇關(guān)于React高級指引之Refs and the DOM使用時機詳解的文章就介紹到這了,更多相關(guān)React Refs and the DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: