React中Ref的作用小結

更新時間：2024年11月10日 10:36:04 作者：ZL不懂前端

本文文章介紹了React中的Ref概念,包括其基礎概念、使用方式,并討論了在React中通過Ref操作DOM值時避免組件不更新的問題,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧

一、Ref的基礎概念

Ref是React提供的一個接口，允許我們訪問在渲染過程中創(chuàng)建的DOM節(jié)點或組件實例。它通常用于需要直接操作DOM或訪問組件內部狀態(tài)的情況。值得注意的是，Ref并不屬于React的數(shù)據(jù)流的一部分，因此它的變更不會觸發(fā)組件的重新渲染。

二、Ref的使用方式

createRef方法

React 16.3引入了createRef方法，它允許我們創(chuàng)建一個可變的Ref對象，并將其賦值給一個類屬性。這個Ref對象有一個current屬性，該屬性指向被引用的DOM節(jié)點或組件實例。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myInputRef = React.createRef();
  }
 
  focusInput = () => {
    this.myInputRef.current.focus();
  };
 
  render() {
    return (
      <div>
        <input type="text" ref={this.myInputRef} />
        <button onClick={this.focusInput}>聚焦輸入框</button>
      </div>
    );
  }
}

函數(shù)組件中的useRef

在函數(shù)組件中，由于它們沒有實例，因此不能直接使用this.refs來訪問Ref。但是，React提供了useRef鉤子，它允許我們在函數(shù)組件中創(chuàng)建和使用Ref。

import React, { useRef } from 'react';
 
const MyFunctionComponent = () => {
  const inputRef = useRef(null);
 
  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
 
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>聚焦輸入框</button>
    </div>
  );
};

回調函數(shù)Ref

回調函數(shù)Ref是一種更為靈活和推薦的使用方式。通過提供一個回調函數(shù)，我們可以在Ref被設置或更新時執(zhí)行自定義邏輯。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myInputRef = null;
  }
 
  setMyInputRef = (element) => {
    this.myInputRef = element;
  };
 
  focusInput = () => {
    if (this.myInputRef) {
      this.myInputRef.focus();
    }
  };
 
  render() {
    return (
      <div>
        <input type="text" ref={this.setMyInputRef} />
        <button onClick={this.focusInput}>聚焦輸入框</button>
      </div>
    );
  }
}

三、ref操作值但組件不更新的問題

在 React 中，組件的更新通常是由狀態(tài)（state）或屬性（props）的變化觸發(fā)的。當使用ref直接操作組件的值時，React 并不知道這個值已經(jīng)改變了，因為ref繞過了 React 的響應式更新機制。React 的更新機制是基于虛擬 DOM 的比較，只有當state或props發(fā)生變化時，React 才會重新渲染組件。
在函數(shù)組件中，我們通常使用React的useState和useRef鉤子來管理狀態(tài)和引用，與類組件類似，直接通過Ref修改狀態(tài)通常不會觸發(fā)組件的重新渲染。這是因為Ref主要用于直接訪問DOM元素或組件實例，而不是用于管理狀態(tài)。

舉例

import React, { useState, useRef } from 'react';

const SimpleInputComponent = () => {
  const [inputValue, setInputValue] = useState(0); // React狀態(tài)
  const inputRef = useRef(0); // DOM引用

  // 處理輸入框變化，更新React狀態(tài)
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  // 直接通過Ref修改DOM值（不推薦）
  const forceUpdateDOMValue = () => {
    if (inputRef.current) {
      inputRef.current.value = 1;
      // 注意：這里雖然DOM值變了，但React狀態(tài)inputValue沒有變
    }
  };

  // 通過useState更新狀態(tài)（推薦）
  const updateStateValue = () => {
    setInputValue(2);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue} // 這里綁定的是React狀態(tài)
        onChange={handleInputChange} // 更改時會更新React狀態(tài)
        ref={inputRef} // 綁定DOM引用
      />
      <button onClick={forceUpdateDOMValue}>通過Ref直接修改DOM值</button>
      <button onClick={updateStateValue}>通過useState更新狀態(tài)</button>
      <p>當前React狀態(tài)值：{inputValue}</p>
    </div>
  );
};

export default SimpleInputComponent;

在這個例子中，我們有一個輸入框和兩個按鈕。當你輸入文字時，React狀態(tài)inputValue會更新，并且組件會重新渲染以反映新的狀態(tài)。然而，當你點擊“通過Ref直接修改DOM值”按鈕時，雖然輸入框的DOM值被改變了，但React狀態(tài)inputValue并沒有改變，因此頁面上顯示的React狀態(tài)值不會更新。相反，當你點擊“通過useState更新狀態(tài)”按鈕時，React狀態(tài)inputValue會被更新，并且組件會重新渲染以顯示新的狀態(tài)值。

到此這篇關于React中Ref的作用小結的文章就介紹到這了,更多相關React Ref內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: