React中useState初始值作用与多状态属性获取方法

useState传入参数0的作用 #

传入useState的参数是对应状态的初始值，遵循以下规则：

• 这个初始值仅在组件首次挂载渲染时生效，组件后续触发重渲染时，React会直接读取上一次更新完成的状态值，不会重复用传入的初始值重置状态。示例里const [count, setCount] = useState(0)的含义就是：组件第一次渲染时，count这个状态的初始值为0。
• 如果初始状态需要经过高开销的复杂计算才能得到，你可以传入一个返回初始值的函数作为useState的参数，这个函数也只会在组件首次渲染时执行一次，避免每次重渲染都重复跑计算逻辑浪费性能，写法示例：

const [count, setCount] = useState(() => {
  // 这里的计算逻辑仅在组件首次渲染时执行
  const initialValue = heavyCalcOperation(props);
  return initialValue;
});

多状态的声明与区分方式 #

React是靠useState在组件顶层的调用顺序来一一对应不同状态的，你只需要在组件顶层多次调用useState，为每个状态设置独立的变量名和对应的修改方法即可，不同useState声明的状态是完全独立、互不干扰的。

如果你需要从props中取多个值初始化不同状态，参考写法如下：

function ArticleEditor(props) {
  // 第一个状态：文章标题，初始值取props传入的defaultTitle
  const [title, setTitle] = useState(props.defaultTitle);
  // 第二个状态：文章内容，初始值取props传入的defaultContent
  const [content, setContent] = useState(props.defaultContent);
  // 第三个状态：发布状态，初始值取props传入的isPublished
  const [isPublished, setIsPublished] = useState(props.isPublished);

  // 业务逻辑...
}

注意：所有useState调用必须写在函数组件的最外层，不能放在if条件判断、for循环、嵌套函数里，否则会破坏Hook的固定调用顺序，导致状态映射出错。

如果多个状态之间关联度很高，你也可以把它们合并成一个对象类型的状态，用单个useState管理。需要注意的是，useState返回的状态修改方法不会像类组件的this.setState一样自动合并对象属性，更新时需要手动展开原有状态，避免字段丢失，示例：

// 合并为对象状态的写法
const [article, setArticle] = useState({
  title: props.defaultTitle,
  content: props.defaultContent,
  isPublished: props.isPublished
});

// 更新标题的正确写法
setArticle(prev => ({
  ...prev, // 手动展开原有状态，保留content、isPublished字段
  title: "新的文章标题"
}))

两种写法没有绝对优劣：状态之间逻辑独立就分开声明，代码可读性更高；状态关联性强就合并管理，减少重复代码。

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