useRef 了解你“真正的需要”

在React中，useRef和state是两种用于管理组件状态的不同方式。useRef可以让你访问DOM元素和持久状态，而state则更适合于需要经常更新的状态。

useRef

useRef是一个特殊的React hook，它允许你创建一个可变的ref对象，该对象可以存储一个值，并且该值在整个组件的生命周期中保持不变。useRef最常用的场景是访问DOM元素。例如，你可以使用useRef来创建一个指向DOM元素的ref，然后使用该ref来访问该元素。

const myRef = useRef(null);

function MyComponent() {
  const handleClick = () => {
    console.log(myRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <div ref={myRef} />
    </div>
  );
}

state

state是组件的一个属性，它可以存储一个值，并且该值可以在组件的生命周期中更新。state最常用的场景是存储用户输入的数据。例如，你可以使用state来存储一个文本输入框的值。

const [value, setValue] = useState("");

function MyComponent() {
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

ref和state的对比

ref和state是用于管理组件状态的两种不同方式。ref更适合于不需要经常更新的状态，例如DOM元素引用或表单值，而state则更适合于需要经常更新的状态，例如计数器或用户输入。

何时使用useRef

• 当你需要访问DOM元素时。
• 当你需要存储一个值，并且该值在整个组件的生命周期中保持不变时。

何时使用state

• 当你需要存储一个值，并且该值需要经常更新时。
• 当你需要存储用户输入的数据时。

useRef的优点

• useRef可以让你访问DOM元素。
• useRef可以存储一个值，并且该值在整个组件的生命周期中保持不变。

useRef的缺点

• useRef不能用于存储需要经常更新的状态。
• useRef不能用于存储用户输入的数据。

state的优点

• state可以用于存储需要经常更新的状态。
• state可以用于存储用户输入的数据。

state的缺点

• state不能用于访问DOM元素。
• state不能存储一个值，并且该值在整个组件的生命周期中保持不变。

总结

useRef和state是用于管理组件状态的两种不同方式。useRef更适合于不需要经常更新的状态，例如DOM元素引用或表单值，而state则更适合于需要经常更新的状态，例如计数器或用户输入。