react中useState、useRef之间的区别

在React中，useState和useRef都是用于存储和管理数据的Hooks，但它们之间有一些关键区别。

1. useState：

useState是用于在函数组件中管理状态的Hook。它返回一个包含两个元素的数组：当前状态值和一个用于更新状态的函数。当状态更新时，组件会重新渲染。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

在这个示例中，我们使用useState来管理计数器的状态。每次点击按钮时，计数器的值都会增加，组件会重新渲染以显示新的计数值。

1. useRef：

useRef用于在组件的整个生命周期内持久保存和访问数据。它返回一个可变的对象，该对象具有一个名为current的属性，用于存储引用的值。与useState不同，当useRef的值发生变化时，组件不会重新渲染。

useRef通常用于访问DOM元素、存储上一次的状态值或在组件生命周期内保持一个不变的值。

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

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

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

export default App;

在这个示例中，我们使用useRef来创建一个输入框的引用。当点击按钮时，输入框会获得焦点。注意，当我们更新inputRef.current的值时，组件并没有重新渲染。

总结：

• useState用于管理组件的状态，当状态更新时，组件会重新渲染。
• useRef用于在组件的整个生命周期内持久保存和访问数据，当引用的值发生变化时，组件不会重新渲染。
• useState返回一个数组，包含当前状态值和一个更新状态的函数；useRef返回一个具有current属性的可变对象，用于存储引用的值。