反应钩子，每个状态值一个钩子?

Question

我对 Hooks 相当陌生，对在未来的项目/工作中使用它非常感兴趣。我很想知道在对具有许多不同状态的组件使用钩子方面有哪些最佳实践的更多信息。据我所知，对于每个状态值，您将使用useState钩子。

例如，假设我们有一个基于类的组件，具有这样的状态：

this.state = {
state1: 0,
state2: '',
state3: false,
state4: [],
state5: {},
state6: null
}

如果我使用钩子转换它...最佳做法是为每个州使用useState(总共 6useState(还是有更好的方法？

谢谢大家！

Answer 1

对于我的选择，我认为最佳实践是：

const [state1, setState1] = useState(0)
const [state2, setState2] = useState('')
const [state3, setState3] = useState(false)
const [state4, setState4] = useState([])
const [state5, setState5] = useState({})

因为要控制的每个州本地都是不同的类型。您可以更灵活地控制每个变量。

但是如果你想处理你的案子，你可以这样做：

const [state, setState] = useState({
state1: 0,
state2: ''
state3: false
})

更新状态 1 和状态 2 时：

setState({
...state,
state1: 1,
state2: "yada"
})

Answer 2

所有以前的答案都是正确的，但您还应该考虑如何以及何时进行更新。例如，如果您有

const [a, setA] = React.useState('a')
const [b, setB] = React.useState('b')

如果您总是同时调用setA和setB，那么您可以将其 probalby 重构为

const [ab, setAB] = React.useState({a: 'a', b: 'b})

因此，一起更新更容易。

否则，具有多个状态是可以的。

这是文档中更详细的文章

Answer 3

这完全取决于你。在我看来你可以做到

const [state1, updateState1] = useState(0);

并按照您的建议对所有重复。

或

将所有状态放在一个对象中，并根据需要进行更新

const [state, updateState] = useState({state1: 0, state2:''});

在这种情况下，要更新状态对象中的任何项目(例如 state1(，您可以执行以下操作

updateState({...state, state1: "new value"})