ReactJS - createRef() 函数

---

---

createRef() 是 React 中用于管理和交互应用程序中项目的工具。它通常用于类组件，但我们还将讨论其等效项 useRef()，它通常用于函数组件。

它类似于可以容纳项目数组的容器。它用于在 React 中在类组件内创建引用对象。此引用对象具有一个名为 current 的属性，可以将其调整为各种值。

语法

class MyClass extends Component {
   classRef = createRef();
   // ...
}

在此示例中，classRef 是对某物的引用，我们可以使用它来与组件中的该事物进行交互。

参数

createRef() 不接受任何参数。

返回值

调用它时，它返回一个对象，其 current 属性默认设置为 null。此属性稍后可以更改为引用组件中的不同元素。

示例

示例 1

import React, { createRef, Component } from 'react';
import './App.css';

class App extends Component {
   inputRef = createRef();   
   componentDidMount() {
      this.inputRef.current.focus();
   }
   
   render() {
      return <div className='App'><input ref={this.inputRef} />
      </div>
   }
}

export default App;

输出

启动程序时，输入光标会立即放置在框内，准备让我们开始键入。这在我们需要用户拥有流畅且专注的输入体验的情况下非常有用，例如在线表单或搜索栏。

示例 2

在这个应用程序中，我们设置了一个计时器，每秒钟滴答一次。它可用于显示已过去的时间或定期启动事件。计时器在应用程序加载时开始，在应用程序关闭时结束。

import React, { createRef, Component } from 'react';
import './App.css';

class TimerComponent extends Component {
   timerRef = createRef();   
   componentDidMount() {
      this.timerRef.current = setInterval(() => {
         console.log('Timer tick');
      }, 1000);
   }
   
   componentWillUnmount() {
      clearInterval(this.timerRef.current);
   }   
   render() {
      return <div>Timer Component</div>;
   }
}

export default TimerComponent;

输出

此应用程序完全关于管理时间敏感的任务。启动应用程序时，计时器开始每秒钟滴答一次。当我们需要计时或定期触发某些事件时，它会非常方便。退出应用程序时，计时器停止。

示例 3

在这个应用程序中，当我们单击一个按钮时，一个框的颜色会变为浅蓝色。它展示了如何使用 React 来轻松地交互和更改我们网站上项目的显示。这对于创建交互式和动态用户界面非常有用。

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

class App extends Component {
   divRef = createRef();   
   handleClick = () => {
      this.divRef.current.style.backgroundColor = 'lightblue';
   };
   
   render() {
      return <div ref={this.divRef} onClick={this.handleClick}><h1>Click me!</h1></div>;
   }
}

export default App;

输出

运行应用程序后，它允许我们快速与网页元素交互。单击按钮时，方框的颜色会变为浅蓝色。此示例显示了 React 如何让我们轻松调整和控制网页上项目的样式。

局限性

值得注意的是，每次调用 createRef() 时，我们都会得到一个新对象。这意味着如果我们比较两个 refs，即使它们是通过 createRef() 创建的，它们也是不同的对象。这对类组件来说很好，但在函数组件中，我们可以选择使用 useRef()，它始终返回相同的对象。

总结

createRef() 是 React 中一个有用的函数，特别是对于类组件。它允许我们轻松地引用和交互元素。在函数组件中，我们可能需要考虑使用 useRef() 来获取相同的引用对象。