React 中如何使用 Refs？

推荐答案

在 React 中，Refs 用于直接访问 DOM 元素或 React 组件实例。以下是使用 Refs 的几种常见方式：

1. 使用 React.createRef()

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

2. 使用回调 Refs

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    if (this.myRef) {
      this.myRef.focus();
    }
  }

  render() {
    return <input type="text" ref={this.setMyRef} />;
  }
}

3. 在函数组件中使用 useRef Hook

// www.javascriptcn.com code example
function MyComponent() {
  const myRef = React.useRef(null);

  React.useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
}

本题详细解读

1. React.createRef()

React.createRef() 是 React 16.3 引入的 API，用于创建一个 Ref 对象。这个 Ref 对象可以通过 ref 属性附加到 React 元素或组件上。通过 ref.current 可以访问到实际的 DOM 元素或组件实例。

2. 回调 Refs

回调 Refs 是一种更灵活的方式，允许你在 Ref 被设置或清除时执行自定义逻辑。回调函数接收 DOM 元素或组件实例作为参数，你可以将其赋值给组件实例的某个属性。

3. useRef Hook

useRef 是 React Hooks 中的一种，用于在函数组件中创建 Ref。useRef 返回一个可变的 Ref 对象，其 .current 属性被初始化为传入的参数（null 或初始值）。与 React.createRef() 不同，useRef 在组件的整个生命周期内保持不变。

使用场景

• 访问 DOM 元素：例如，自动聚焦输入框、获取元素的尺寸等。
• 访问子组件的实例：在类组件中，Refs 可以用于访问子组件的实例方法。
• 存储可变值：useRef 可以用于存储任何可变值，类似于类组件中的实例属性。

注意事项

• 避免过度使用 Refs：React 提倡声明式编程，过度使用 Refs 可能导致代码难以维护。
• 不要在渲染期间访问 Refs：Refs 在组件挂载或更新后才可用，因此在渲染期间访问 Refs 可能会导致错误。