在功能组件React中定义状态的最佳实践

Question

我在React中发现了两种定义函数组件状态的方法。我真的不知道有什么区别。

第一种选择：

export function TestComponent() {
const [state, setState]: [string, Function] = React.useState('');
}

第二种选择：

export function TestComponent() {
const [state, setState] = React.useState<string>('');
}

两者都有效，但使用哪种方法是最好的选择？我更喜欢用第二个选项，因为它更短。

Answer 1

这就足够了：

const [state, setState] = React.useState('');

请注意，如果您提供初始值设定项，那么您甚至不需要<string>部分。

如果它更复杂，例如string|null，您可能需要它：

const [state, setState] = React.useState<string|null>(null);

但如果它总是一根绳子，那就没必要了。

Answer 2

它们是一样的，还有T.J.建议的方法。它们之间没有区别。唯一的区别是，如果您想将一个状态初始化为null，然后将其更改为字符串，在这种情况下使用

const [state, setState] = React.useState('')

还不够。

Answer 3

您可以使用它，它在react中运行良好：

const [state, setState] = React.useState('');

在TypeScript React中，它用于定义类型

const [state, setState] = React.useState<string>('');