React Hooks中useState()从props初始化状态变量的推荐方式

React 官方对这个场景有明确的实现规范，你提到的两种写法运行效果有本质差异，不存在效果等价的情况，其中空依赖useEffect赋值的写法属于明确不推荐的反模式。

两种常见写法的核心差异 #

写法1：直接将Props值作为useState初始值传入 #

function SomeComponent(props) {
    const [someVariable, setSomeVariable] = useState(props.someValue);
}

• 执行时机：组件首次渲染阶段就完成状态初始化，首次渲染输出的内容直接基于Props传入的初始值生成，不存在中间空状态
• 行为特性：useState的初始参数只会在组件首次挂载时生效1次，后续父组件更新导致props.someValue变化时，本地状态someVariable不会自动同步——这是API本身的设计，完全符合「仅用Props做初始值，后续状态由组件自身维护」的需求，不存在任何副作用。

写法2：初始化为null + 空依赖useEffect赋值 #

function SomeComponent(props) {
    const [someVariable, setSomeVariable] = useState(null);

    useEffect(() => {
        setSomeVariable(props.someValue);
    },[])
}

• 执行时机：组件会先带着null的状态完成首次渲染、把空内容提交到DOM，之后才会执行useEffect里的赋值逻辑，触发第二次重渲染，用户会感知到明显的内容闪烁
• 存在问题：平白多了一次无意义的重渲染，如果首次渲染逻辑里用到someVariable，还会因为值为null抛出报错、或者渲染出错误内容，没有任何收益。

分场景的最优实现选型 #

没有万能写法，根据你的业务需求选对应方案即可：

• 场景1：Props仅做初始值，后续状态和Props完全脱钩、由组件自行维护
  直接用第一种写法即可，这是官方推荐的标准实现。如果初始值需要经过复杂计算，建议用useState的惰性初始化写法，避免每次渲染都重复执行计算逻辑：

  function SomeComponent(props) {
    // 传入函数，复杂计算仅在组件首次挂载时执行1次
    const [someVariable, setSomeVariable] = useState(() => {
      return heavyFormat(props.someValue);
    });
  }
  

• 场景2：状态需要始终跟随Props变化同步更新
  这种场景根本不需要维护本地状态，直接使用Props值即可；如果需要基于Props做计算转换，用useMemo缓存派生结果就行，不要存冗余的本地状态：

  function SomeComponent(props) {
    // 派生值会随props.someValue变化自动更新，不需要手动触发set
    const derivedValue = useMemo(() => {
      return transform(props.someValue);
    }, [props.someValue]);
  }
  

• 场景3：Props做初始值，同时需要在Props变化时按需重置本地状态（比如表单编辑场景）
  不要用空依赖的useEffect，把对应Props加到依赖数组里即可，按需触发状态同步：

  function SomeComponent(props) {
    const [someVariable, setSomeVariable] = useState(props.someValue);
  
    // 仅当props.someValue变化时，才同步更新本地状态
    useEffect(() => {
      setSomeVariable(props.someValue);
    }, [props.someValue]);
  }
  

选型规范总结 #

• 绝对不要用「初始化为null + 空依赖useEffect赋Props值」的写法，只会带来多余渲染和中间态bug
• 仅需要Props做初始化：直接传Props给useState，复杂计算用惰性初始化
• 需要状态跟随Props联动：优先直接用Props/useMemo派生值，避免冗余状态
• 需要Props变化时重置本地状态：给useEffect加上对应Props依赖，不要留空数组

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