React状态初始化：useState函数式初始化与useEffect、useMemo选型疑问

1. useState函数式初始化是否属于不良实践？ #

完全不是，这是React官方推荐的最佳实践之一，尤其适合初始化状态需要复杂计算的场景。

比如你示例中的写法：

const [token, setToken] = useState(() => {
  return findToken(a,b);
});

它的核心优势：

• 初始化函数仅在组件首次渲染时执行一次，后续重渲染不会重复计算，避免不必要的性能损耗
• 状态声明与初始化逻辑绑定，代码结构更清晰

哪怕是简单计算，用这种方式也不会有问题，只是没必要而已。

2. 相比useEffect，是否更适合用useMemo？ #

先明确三者的核心定位：

• 函数式useState：专用于状态初始化，仅执行一次（组件卸载重建除外）
• useEffect：用于处理副作用（如接口请求、DOM操作），挂载/依赖变化时执行，执行后会触发重渲染
• useMemo：用于缓存渲染阶段的计算结果，避免重复计算，它返回的是值，不是初始化状态的正确工具

你的useMemo用法是错误的 #

示例中的这段代码存在逻辑问题：

const [token, setToken] = useState(useMemo(() => findToken(a,b), [a,b]));

• useMemo的依赖[a,b]变化时，会重新计算结果，但useState只会在首次渲染时读取初始值，后续依赖变化不会更新token状态，等于依赖完全失效
• 这完全混淆了useMemo的用途，它是用来优化渲染时的计算，而非初始化状态

函数式useState vs useEffect初始化 #

对比前两个示例：

• 函数式useState：首次渲染直接算出token初始值，组件仅渲染一次（状态无后续变化）
• useEffect：首次渲染时token为undefined，组件先渲染一次；useEffect执行后调用setToken，触发第二次渲染，会短暂显示Token: undefined

所以如果是纯初始化状态（无副作用），函数式useState远优于useEffect，既避免额外重渲染，逻辑也更简洁。

3. 使用函数式初始化状态的额外注意事项 #

• 初始化函数无参数：它的作用域是组件首次渲染时的作用域，只能访问首次渲染时的变量值。如果后续a/b变化，初始化函数不会重新执行，状态也不会自动更新；若需同步变量变化，要配合useEffect或主动调用setToken。
• 禁止在初始化函数中执行副作用：比如接口请求、DOM操作这类副作用，必须放在useEffect里。初始化函数应该是纯函数，只做计算，不产生副作用。
• 性能优化场景：如果初始化计算很重（如解析大JSON、复杂运算），用函数式初始化能避免每次重渲染都重复计算，比直接传计算结果（useState(findToken(a,b))）更高效，因为后者会在每次重渲染时执行findToken。
• 不要依赖props/state的后续变化：初始化函数只执行一次，若初始值依赖的props后续更新，状态不会自动同步，需要用useEffect监听props变化来更新状态。

代码示例对比 #

推荐的函数式初始化写法 #

import React, { useState } from "react";

export default function Token() {
  const a = 5
  const b = 5

  const findToken = (a,b) => {
    return a*b;
  };

  // 仅在首次渲染时计算一次
  const [token, setToken] = useState(() => findToken(a,b));

  return (
    <div>
      <h1>Token: {token}</h1>
    </div>
  );
}

不推荐的useEffect初始化写法（触发两次渲染） #

import React, { useState, useEffect } from "react";

export default function Token() {
  const a = 5
  const b = 5
  const [token, setToken] = useState();
   
  // 首次渲染后执行，触发第二次渲染
  useEffect(() => {
    setToken(a*b);
  }, []);

  return (
    <div>
      <h1>Token: {token}</h1> {/* 首次渲染时显示undefined */}
    </div>
  );
}

错误的useMemo用法（依赖变化无法更新状态） #

import React, { useState, useMemo } from "react";

export default function Token() { 
  const a = 5
  const b = 5

  const findToken = (a,b) => {
    return a*b;
  };

  // 错误：useMemo的依赖变化不会影响useState的初始值
  const [token, setToken] = useState(useMemo(() => findToken(a,b), [a,b]));

  return (
    <div>
      <h1>Token: {token}</h1>
    </div>
  );
}

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