javascript - React hooks，每个状态值一个钩子(Hook)？

Question

我对 Hooks 还很陌生，对将它用于 future 的项目/工作非常感兴趣。我很想了解更多关于对具有许多不同状态的组件使用 Hook 的最佳实践。据我所知，对于每个状态值，您将使用 useState Hook 。

例如，假设我们有一个基于类的组件，其状态为:

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

如果我要使用钩子(Hook)来转换它...最好的做法是对每个状态使用 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"
   })