深入剖析 React Ref 的奇妙应用，揭秘交互设计的新天地

前端

2023-11-08 13:01:23

React Ref 基本了解：妙用 Ref 玩转交互，巧夺天工

**目录**

Refs 的产生
Refs 的使用场景
Ref 的四种方式
Ref 的使用示例

Refs 的产生

Refs 的产生源于 React 组件与 DOM 元素之间的关系。在 React 中，组件是逻辑上的概念，而 DOM 元素是物理上的存在。组件可以渲染出 DOM 元素，但组件本身并不包含 DOM 元素。

为了弥合组件与 DOM 元素之间的鸿沟，React 引入了 Ref 的概念。Ref 是一个特殊的属性，它可以将组件与 DOM 元素关联起来。一旦组件和 DOM 元素关联起来，我们就可以通过 Ref 来操作 DOM 元素。

Refs 的使用场景

Ref 的使用场景非常广泛，常见的使用场景有：

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。

Ref 的四种方式

在 React 中，有四种方式可以创建 Ref：

字符串（string ref）
回调函数（callback ref）
创建 ref 对象（createRef）
使用转发 ref（forward ref）

Ref 的使用示例

以下是 Ref 的一些使用示例：

使用 Ref 来管理焦点：

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

使用 Ref 来触发强制动画：

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

const MyComponent = () => {
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;
    gsap.to(element, { duration: 1, opacity: 1 });
  }, []);

  return <div ref={ref}></div>;
};

export default MyComponent;

使用 Ref 来集成第三方 DOM 库：

import React, { useRef } from 'react';
import Chart from 'chart.js';

const MyComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const canvas = chartRef.current;
    const ctx = canvas.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: 'My Dataset',
          data: [10, 20, 30],
          backgroundColor: ['red', 'blue', 'yellow'],
        }],
      },
    });
  }, []);

  return <canvas ref={chartRef} width="400" height="200"></canvas>;
};

export default MyComponent;