React中如何基于props动态设置useState的初始值

基础实现（仅首次渲染设置初始值） #

useState支持直接传入表达式作为初始值，你可以直接通过三元运算符判断props的值来设置初始状态：

const [active, setActive] = useState(props.isFilterMode ? null : 0);

注意：这个写法的初始值只会在组件首次挂载时计算一次，后续isFilterMode prop发生变化时，active状态不会自动同步更新。

进阶实现（响应prop的后续变化） #

如果你的业务场景需要isFilterMode prop变化时，active状态同步更新，可以搭配useEffect监听prop的变化：

import { useState, useEffect } from 'react';

function YourComponent(props) {
  // 初始化状态
  const [active, setActive] = useState(props.isFilterMode ? null : 0);

  // 监听isFilterMode变化，同步更新状态
  useEffect(() => {
    setActive(props.isFilterMode ? null : 0);
  }, [props.isFilterMode]);

  // 剩余组件逻辑...
}

性能优化方案 #

如果初始值的计算逻辑比较复杂，可以给useState传入初始化函数，避免每次组件重渲染都重复执行计算逻辑：

const [active, setActive] = useState(() => {
  // 可在这里写更复杂的初始化判断逻辑
  return props.isFilterMode ? null : 0;
});

初始化函数仅会在组件首次渲染时执行一次，不会在后续重渲染时触发。

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