Skip to content

Latest commit

 

History

History
156 lines (111 loc) · 5.29 KB

「深入浅出 React：变量、状态与方法的最佳实践与适用场景详解」.md

File metadata and controls

156 lines (111 loc) · 5.29 KB

在 React 开发中，理解 变量（组件外/内）、useState、useRef 和 方法（组件外/内） 的适用场景可以帮助开发者选择适合的方式管理和使用状态、逻辑及数据。以下是它们的核心概念和适用场景：

1. 变量

组件外部变量

定义：在 React 组件外部声明的变量。

  • 生命周期：通常与模块或文件同生命周期，内存不会因为组件的重新渲染而释放。
  • 适用场景：
    1. 定义与组件无关的全局配置或常量。
    2. 定义模块范围内的工具函数、数据、或缓存。
    3. 避免在组件内部重复定义不随状态变化的数据。

示例：

const API_BASE_URL = "https://api.example.com"; // 配置或常量
const userDataCache = {}; // 缓存数据

组件内部变量

定义：在 React 组件内部声明的变量（通常用 let 或 const）。

  • 生命周期：每次组件重新渲染时，重新初始化，旧的值会丢失。
  • 适用场景：
    1. 临时计算的数据。
    2. 只用于当前渲染的逻辑而不会被持久化的变量。

示例：

function ExampleComponent() {
  const computedValue = 5 + 3; // 临时计算
  return <div>{computedValue}</div>;
}

2. useState

定义：useState 是一个 React Hook，用于定义组件的状态，并在状态变化时触发重新渲染。

  • 生命周期：状态值的生命周期与组件一致，且会在组件重新渲染时保持其值。
  • 适用场景：
    1. 需要在渲染之间保持的动态值。
    2. 需要更新时重新触发组件渲染的数据。
    3. 需要响应用户交互（如输入）的数据。

示例：

function Counter() {
  const [count, setCount] = useState(0); // 声明状态

  const increment = () => setCount(count + 1); // 更新状态
  return <button onClick={increment}>Count: {count}</button>;
}

3. useRef

定义：useRef 是一个 React Hook，用于创建一个可变的引用对象，值的改变不会触发重新渲染。

  • 生命周期：引用对象在组件的整个生命周期内保持一致，不会因为组件重新渲染而重新初始化。
  • 适用场景：
    1. 持久化非状态数据：如 DOM 节点、定时器 ID 或其他不会引发渲染的数据。
    2. 访问或操作 DOM 元素。
    3. 存储组件之间共享的数据而不触发渲染。

示例：

function Timer() {
  const timerIdRef = useRef(null);

  const startTimer = () => {
    timerIdRef.current = setInterval(() => console.log("Tick"), 1000);
  };

  const stopTimer = () => {
    clearInterval(timerIdRef.current);
  };

  return (
    <>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </>
  );
}

4. 方法（函数）

组件外部方法

定义：在组件外定义的函数。

  • 适用场景：
    1. 逻辑与组件的状态和生命周期无关（如工具函数）。
    2. 在多个组件中需要复用的逻辑。

示例：

function formatDate(date) {
  return date.toISOString().split("T")[0]; // 处理日期格式化
}

function ExampleComponent() {
  const today = formatDate(new Date());
  return <div>Today's Date: {today}</div>;
}

组件内部方法

定义：在组件内定义的函数，通常直接使用组件的状态或引用。

  • 适用场景：
    1. 依赖组件的内部状态。
    2. 响应用户交互（如点击、输入）。
    3. 和组件生命周期紧密关联的逻辑。

示例：

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

  const increment = () => setCount(count + 1); // 内部状态相关逻辑
  return <button onClick={increment}>Count: {count}</button>;
}

总结

类型 生命周期 是否触发渲染 适用场景
组件外部变量 模块范围 否 配置、常量、工具函数、跨组件共享的缓存。
组件内部变量 单次渲染 否 临时计算或渲染逻辑相关的数据。
useState 组件范围，状态改变时重新渲染 是 动态值需要随交互或数据变化，且组件需要响应时使用。
useRef 组件范围，整个生命周期保持不变 否 持久化非状态数据，如 DOM 引用、计时器 ID 或其他不会引发重新渲染的值。
组件外部方法 模块范围 - 逻辑独立、可复用，不依赖组件状态。
组件内部方法 每次渲染时重新定义（可用 useCallback 优化） - 依赖组件状态、响应用户交互，或与组件生命周期相关的逻辑。