Зацепил шаблон разрушения массива React

На днях я читал о великом, но очень не относящемся к TLDR посте легендарного бога Реактива Дана Амброва об использовании эффекта. Иногда я подделываю пока я сделаю это, это нормально, но потом он может вернуться позже и укусить меня в задницу! Переход к крючкам был довольно запутанным на самом деле, так как большинство людей предполагали (включая меня), что изменения были примерно синтаксис. На самом деле, изменения более существенны и включают переосмысление ифециклов и то, как мы реструктурируем компоненты. Этот [в процессе ...] пост показывает нам, что нужно переосмыслить ...

Фактор счетчика UseEffect

В посте говорится о том, что это не правильно, счетчик всегда будет равен нулю.const Counter = () => {   const [count, setCount] = useState(0);    useEffect(() => {     const id = setInterval(() => {       setCount(count + 1);     }, 1000);     return () => clearInterval(id); // Cleanup on 'unmounting'   }, []);   return 

{count}

; }Однако установка наблюдателя в состояние счета позволит корректно обновить эффект.useEffect(() => {   const id = setInterval(() => {     setCount(count + 1);  }, 1000);   return () => clearInterval(id); }, [count]);Это в значительной степени будет самым распространенным способом, с которым большинство из нас завершит. Но Дан Амбров говорит, что мы можем выровнять другой способ, который бы полностью удалил наблюдателя!useEffect(() => {     const id = setInterval(() => {       setCount(c => c + 1);    }, 1000);     return () => clearInterval(id);   }, []);Удивительно! Однако, если вы любите меня и были слишком ленивы, чтобы полностью понять деструктуризацию массива хуков React, тогда вы, вероятно, спрашиваете… Откуда, черт возьми, это "c"? Возможно, не такой уж новый, но новый для многих из нас, и хуки продвинули его на новый уровень!const [state, setState] = useState(init);useState - это функция, которая возвращает массив функций ... Например, мы могли бы смоделировать это так;const useState = (initialState) => {  return [state(initialState), setState(initialState)] } const state = (parameter) => {     return `this is the state function with the parameter - ${parameter}` } const setState = (parameter) => {     return `this is the setState function with the parameter - ${parameter}` }Вызов useState поможет нам;useState(99) (2) ["this is the state with the parameter - 99", "this is the setState with the function parameter - 99"] useState(99)[0] "this is the state with the parameter - 99" useState(99)[1] "this is the setState with the parameter - 99" useState(99)[2] undefined // Element doesn't existДеструктурирование позволяет нам переименовывать возвращаемые элементы как то, что они называют, чтобы представлять себяconst [state, setState] = useState(99) // Equivalent to... const state = useState(99)[0] const setState = useState(99)[1]Но в этом случае мы получаем ошибку: Uncaught SyntaxError: Идентификатор 'state' уже объявлен. Это потому, что мы уже использовали состояние имени в нашем выражении функции внутри useState. На самом деле мы можем использовать любое имя, которое захотим (которого еще нет used) для представления первых двух элементов возвращаемого массива из useState;const [whatIsTheState, changeUpDatState] = useState(99) whatIsTheState "this is the state with the param - 99" changeUpDatState "this is the setState with the param - 99"Спасибо Кену Доддсу за его пост, который помог мне понять это.

Rosetta Stone That Counter

Отлично, давайте вернемся к этому счетчику;const Counter = () => {   const [count, setCount] = useState(0);   useEffect(() => {     const id = setInterval(() => {         setCount(c => c + 1);           }, 1000);       return () => clearInterval(id);     }, []);     return 

{count}

; }c - это параметр setCount, который является initialState объекта useState, который в первый раз равен 0. Один из них добавляется к c, а затем возвращается как параметр для setCount, который устанавливает новый счетчик. Это происходит каждую секунду. Это означает, что useEffect запускается один раз при загрузке, и нет необходимости продолжать вызывать useEffect для каждого изменения, поскольку все это происходит один раз.

Потенциал пользовательских хуков

Сила этого шаблона в том, что он имеет массу возможностей, когда вы начинаете использовать пользовательские хуки. Элементы могут быть абстрагированы от компонентов и иметь только соответствующие данные, возвращаемые в этих массивах, которые будут использоваться.const [name, age, error] = useCustomerDataAPI(key)Здесь этот готовый пользовательский хук можно настроить следующим образом. Хук нуждается в ключе API в качестве параметра, а затем вернет 3 функции, которые возвращают строку имени, возраст числа и логическую ошибку. Эти три функции могут использоваться в нашем компоненте, скорее всего, с помощью ошибки, чтобы проверить, является ли она false и затем отображает имя и возраст на странице. Я не буду вдаваться в детали самого пользовательского хука, вероятно, потребуется еще один пост. На данный момент я действительно наслаждаюсь направлением, в котором движется React… До следующего раза, ребята, счастливого кодирования!

Теги

React Javascript Technology Frontend Рефакторинг шаблонов проектирования Кодирование Последние технические истории Продолжить обсуждение
Источник: https://hackernoon.com/hooked-on-reacts-array-destructuring-pattern-ed32y3smn

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння