React中useState三种写法对比：带泛型、无泛型、React.useState哪种更优？

这几种写法没有绝对的“最优解”，主要看项目环境和团队规范，下面逐一拆解：

1. 带TypeScript泛型的写法 #

const [nameInput, setNameInput] = useState<string>('');
const [availableDays, setAvailableDays ] = useState<string[]>([]);

这是TypeScript项目的标准写法，通过泛型明确指定state的类型，开发阶段就能捕获类型不匹配的错误（比如给字符串类型的state赋值数字），能大幅提升代码的可维护性和健壮性。如果你的项目基于TS开发，或者开启了TypeScript语法检查（比如@ts-check），优先用这种写法。

2. 纯JavaScript简洁写法 #

const [nameInput,setNameInput] = useState('');
const [availableDays,setAvailableDays] = useState([]);

这是纯JS项目的常规写法，React会根据初始值自动推断state类型（比如空字符串推断为string，空数组推断为any[]），写法简洁，适合小型项目或快速原型开发。缺点是没有类型校验，后期维护容易出现隐式类型错误。

3. 全局导入React后调用React.useState #

import * as React from 'react';
const [nameInput,setNameInput] = React.useState('');
const [availableDays,setAvailableDays] = React.useState([]);

这是React 17之前的兼容写法——在React 17之前，JSX编译必须依赖全局React变量，所以很多项目会用这种导入方式。React 17之后，JSX编译不再需要显式导入React，这种写法更多是个人习惯或团队遗留规范。它和第二种写法本质逻辑一致，只是调用方式不同，在TS项目里也可以加上泛型写成React.useState<string>('')。

选择建议 #

• 若为TypeScript项目：优先用带泛型的写法，不管是直接导入useState还是通过React.useState调用，泛型都是必要的。
• 若为纯JavaScript项目：第二种简洁写法更常用，第三种写法也没问题，关键是团队统一规范。
• 团队协作时：统一代码风格比单独选哪种写法更重要，能减少沟通成本。

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