Question

我对Hooks并不陌生，并且对将其用于将来的项目/工作非常感兴趣。我很好奇要了解更多关于在具有许多不同状态的组件上使用挂钩的最佳实践。据我所知，对于每个状态值，您都将使用CountDownTime.cancel()钩子。

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

useState

如果我要使用钩子进行转换...最佳做法是针对每个状态使用this.state = { state1: 0, state2: '', state3: false, state4: [], state5: {}, state6: null }（总共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，则可以通过probalby将其重构为

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

因此更容易一起更新。

否则可以有多重状态。

这是doc

中的更详细的文章

Answer 3

完全取决于您。我认为你可以做到

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

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

OR

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

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

在这种情况下，要更新状态对象（例如state1）中的任何项目，请执行类似的操作

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

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

3 个答案: