React组件本地状态存储规则及静态数据非状态留存方案咨询

首先明确：React官方《Thinking in React》的指南没有错误，问题出在你对“留存数据”的实现方式上——你不需要把固定数据存入状态，而是需要缓存这些不会变化的数据，避免每次组件重渲染时重复生成或获取。

以下是几种无需存入组件状态的解决方案：

1. 模块级变量存储 #

如果表单字段的JSON数据是固定的（比如静态文件、硬编码的结构），直接把它定义在组件文件的模块级别（组件函数外部）。模块级变量只会在代码加载时初始化一次，组件无论重渲染多少次，都能直接复用这个值，不会丢失。

示例：

// 直接导入静态JSON文件，模块加载时仅读取一次
import FORM_FIELDS from './form-fields.json';

// 或者硬编码固定的字段结构
const FORM_FIELDS = [
  { name: 'username', type: 'text', label: '用户名' },
  { name: 'email', type: 'email', label: '邮箱' }
];

function FormComponent() {
  // 直接使用FORM_FIELDS渲染表单
  return (
    <form>
      {FORM_FIELDS.map(field => (
        <div key={field.name}>
          <label>{field.label}</label>
          <input type={field.type} name={field.name} />
        </div>
      ))}
    </form>
  );
}

2. 使用useMemo缓存计算结果 #

如果表单字段需要通过一些逻辑生成（比如解析固定字符串、处理静态数据），用useMemo包裹生成逻辑，依赖项传空数组[]，这样只会在组件首次渲染时执行一次计算，后续重渲染直接复用缓存的结果。

示例：

import { useMemo } from 'react';

function FormComponent() {
  const formFields = useMemo(() => {
    // 这里写生成固定表单字段的逻辑，仅执行一次
    return JSON.parse('[{"name":"username","type":"text"},{"name":"email","type":"email"}]');
  }, []); // 空依赖确保只计算一次

  return (
    <form>
      {formFields.map(field => (
        <div key={field.name}>
          <input type={field.type} name={field.name} />
        </div>
      ))}
    </form>
  );
}

3. 使用useRef存储数据 #

useRef的.current属性在组件整个生命周期内保持不变，且修改它不会触发组件重渲染，适合存储不需要引发渲染的固定数据。如果数据是通过异步操作获取的（比如一次不会变的API请求），可以结合useEffect在首次渲染时存入useRef。

示例：

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

function FormComponent() {
  const formFieldsRef = useRef(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 首次渲染时请求固定的JSON数据，存入ref
    fetch('/api/static-form-fields')
      .then(res => res.json())
      .then(data => {
        formFieldsRef.current = data;
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <div>加载中...</div>;

  return (
    <form>
      {formFieldsRef.current.map(field => (
        <div key={field.name}>
          <input type={field.type} name={field.name} />
        </div>
      ))}
    </form>
  );
}

为什么官方指南没错？ #

官方强调“不会随时间变化的信息不应存入状态”，核心原因是状态的作用是管理会变化、需要触发组件重渲染的数据。固定数据不需要触发重渲染，存入状态反而会增加不必要的渲染逻辑（比如setState会触发重渲染）。你之前遇到的“重渲染时数据丢失”，本质是每次渲染都重复执行了数据获取/生成逻辑，而非数据本身需要状态——缓存就能解决这个问题，完全符合官方指南的要求。

内容的提问来源于stack exchange，提问作者smohadjer