Реагировать хуки, один хук для каждого значения состояния? - PullRequest
Новая
       0

Реагировать хуки, один хук для каждого значения состояния?

2 голосов
/ 27 сентября 2019

Я довольно новичок в Hooks и очень заинтересован в использовании его для будущих проектов / работ.Мне любопытно узнать больше о том, каковы лучшие практики с точки зрения использования хуков для компонента со многими различными состояниями.Насколько я знаю, для каждого значения состояния вы бы использовали хук useState.

Скажем, например, у нас есть компонент на основе классов с этим состоянием: 

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

Если бы я конвертировал это с использованием хуков ... наилучшей практикой было бы использование useState для каждого состояния (всего 6 useState) или есть лучший способ?

Спасибо всем!

Ответы [ 3 ]

2 голосов
/ 27 сентября 2019

С моей опцией, я думаю, лучшая практика: 

   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"
   })
1 голос
/ 27 сентября 2019

Все предыдущие ответы верны, но вы также должны учитывать, как и когда вы сообщаете об обновлении.Например, если у вас есть 

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

, если вы всегда звоните setA и setB в то же время, вы можете, вероятно, реорганизовать его в 

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

так что проще обновлять вместе.

В противном случае с состоянием mutiple все в порядке.

Вот более подробная статья из doc

0 голосов
/ 27 сентября 2019

Это полностью зависит от вас.По моему мнению, вы могли бы сделать 

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

и повторить для всех, как вы предложили.

ИЛИ

Поместить все состояния в один объект и обновить при необходимости 

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

В этом случае, чтобы обновить любой элемент в объекте состояния (например, state1), вы делаете что-то вроде 

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