对比react中ref与state

相同点：

• ref和state都可以用来持有和管理组件内的数据。
• 都会在某些条件下导致组件的重新渲染。

不同点：

ref：

• 主要用途：用于访问DOM节点或React元素实例。
• 不触发重渲染：修改ref不会触发组件的重渲染。这使它非常适合存储不需要引起UI变化的数据。
• 持久存储：在组件的整个生命周期内保持不变，类似于实例变量。
• 使用场景：
  • 访问和操作DOM元素，例如获取输入框的值或手动聚焦输入框。
  • 存储任何需要在渲染周期之间保持一致的数据，例如计时器ID或外部库实例。

import React, { useRef, useState, useEffect } from 'react';

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

  useEffect(() => {
    inputRef.current.focus(); // 自动聚焦输入框
  }, []);

  return (
    <input ref={inputRef} />
  );
}

state：

• 主要用途：用于管理和响应用户交互和数据变化，以更新UI。
• 触发重渲染：每当state发生变化时，React会重新渲染组件。
• 短期存储：通常用于在组件的生命周期内保持变化的数据。
• 使用场景：
  • 任何需要反映在UI上的数据变化，例如用户输入、网络请求结果、计数器等。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

官方文档：

ref	state
useRef(initialValue)返回 { current: initialValue }	useState(initialValue) 返回 state 变量的当前值和一个 state 设置函数 ( [value, setValue])
更改时不会触发重新渲染	更改时触发重新渲染。
可变 —— 你可以在渲染过程之外修改和更新 current 的值。	“不可变” —— 你必须使用 state 设置函数来修改 state 变量，从而排队重新渲染。
你不应在渲染期间读取（或写入） current 值。	你可以随时读取 state。但是，每次渲染都有自己不变的 state 快照。