一文读懂useRef：你为何需要它？

2023-09-29 23:51:15

在React的世界中，useRef是一个非常有用的工具，它允许我们以一种不会触发重新渲染的方式来存储和访问组件状态。

useRef的作用与React的状态类似，但有一些关键的区别。首先，useRef不是一个反应式对象，这意味着当它的值发生变化时，组件不会重新渲染。其次，useRef的值可以在组件之间共享，而状态不能。

useRef最常见的用途是存储DOM元素。这可以通过在组件的render方法中使用ref属性来实现。例如：

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

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

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

在这个例子中，useRef被用来存储input元素的引用。当用户点击按钮时，focusInput函数将调用inputRef.current.focus()来使input元素获得焦点。

useRef还可以用来存储任何类型的数据，比如对象、数组或函数。这可以通过在组件的构造函数中使用useRef来实现。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

    this.countRef = useRef(0);
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment State Count
        </button>
        <button onClick={() => this.countRef.current++}>
          Increment useRef Count
        </button>
      </div>
    );
  }
}