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

Question

我对Hooks相当陌生，并且非常有兴趣在未来的项目/工作中使用它。我很好奇地想了解更多关于使用钩子用于具有许多不同状态的组件的最佳实践。据我所知，对于每个状态值，您将使用useState钩子。

例如，我们有一个具有此状态的基于类的组件：

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

如果我用钩子转换这个..。最佳实践是对每个状态使用useState (总共6 useState)还是有更好的方法？

谢谢大家！

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
   })

当更新state1和state2时：

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

Answer 2

前面的所有答案都是正确的，但您也应该考虑如何以及何时状态更新。例如，如果你有

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

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

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"})