React Hooks(4) useRef

紹介

useRef は、変更可能な参照オブジェクトを返す関数です。オブジェクトの現在のプロパティの初期値は、渡された initialValue であり、返されたオブジェクトは、コンポーネントのライフサイクル全体にわたって持続します。

1. 使用方法

DOM 要素への参照は、ref 属性を通じて行われます。
useRef() による初期割り当て
現在の属性を通じて値を表示する

import {
    
    useRef} from 'react';
const ref = useRef(initialValue);

···
//可以在组件生命周期的任何时间log该属性以查看其值
console.log(ref.current)
···

return(
    <button ref={
    
    btnRef}>
      点击
    </button>
);

2. 現在の属性に関する 2 つの重要なポイント

このプロパティは変更可能です
コンポーネントのライフサイクル中いつでも変更可能

2つのアプリケーション

一般に、useRef には 2 つの目的があります。

DOM ノードまたは React 要素にアクセスする
可変変数を保持する

1. DOM ノードまたは React 要素にアクセスする

単純なケースでは、ボタンをクリックして入力を実現し、
クラスコンポーネントのフォーカスを自動的に取得します。

import React, {
    
    Component, createRef} from "react";

export default class Demo extends Component {
    
    
  textInput = createRef()

  focusTextInput = () => {
    
    
    if (this.textInput.current) {
    
    
      this.textInput.current.focus();
    }
  }

  render() {
    
    
    return (
      <>
        <input type="text" ref={
    
    this.textInput} />
        <button onClick={
    
    this.focusTextInput}>点击我让input组件获得焦点</button>
      </>
    );
  }

機能コンポーネントの書き方:

import React, {
    
    useRef} from "react";

export default function Demo() {
    
    
  const inputRef = useRef(null);

  const focusTextInput = () => {
    
    
    if (inputRef.current) {
    
    
      inputRef.current.focus();
    }
  }

  return (
    <>
      <input type="text" ref={
    
    inputRef} />
      <button onClick={
    
    focusTextInput}>点击我让input组件获得焦点</button>
    </>
  );
}

2通りの書き方でrefの生成方法に注意

2. 可変変数を保持する

関数コンポーネントでは、各再レンダリングは関数が再実行されることを意味します。変数参照を関数内に保持したい場合は、useRef を使用できます。
一般的なシナリオはタイマーのクリアです。対応するタイマーを正確にクリアするには、setInterval の実行結果タイマーの参照を確保する必要があります。

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

export default function Timer() {
    
    
  const timerRef = useRef();

  useEffect(() => {
    
    
    timerRef.current = setInterval(() => {
    
    
      console.log('do something');
    }, 1000);

    // 组件卸载时，清除定时器
    return () => {
    
    
      timerRef.current && clearInterval(timerRef.current);
    }
  }, []);

  return (
    <div>
      // ...
    </div>
  )
}

状態またはデータが DOM のレンダリング結果に影響を与える場合、参照を保持するために useRef を使用することを避ける必要があることに注意する必要があります。

3つの概要 useRef

useRef は、ref オブジェクトの内容が変更されたときに通知しません。現在のプロパティを変更しても、コンポーネントは再レンダリングされません。
いくつかの主なアプリケーションシナリオ:

フォーカス、ぼかし、無効化、その他のフォーム管理関連プロパティを使用して入力を細かく管理します
要素にクラスを追加または削除するため (おそらくトランジションやキーフレームアニメーションを制御するため)
他の html5 ライブラリと対話します。このようなライブラリには反応状態を通じてアクセスすることはできず、Ref はフォールバックを提供します。