Автор оригинала: FreeCodeCamp Community Member.
Крис Чак
Вы следовали вашему первому учебное пособие в Rection.js, и вы чувствуете себя великолепно. Что теперь? В следующей статье я собираюсь обсудить 5 концепций, которые принесут ваши навыки реагирования и знания на следующий уровень.
Если вы совершенно новы, чтобы отреагировать, займите некоторое время, чтобы завершить Это руководство И вернуться после!
1. Срок эксплуатации компонента
Безусловно самым важным понятием в этом списке является понимание жизненного цикла компонента. Срок службы компонента является именно то, что звучит: он детализирует жизнь компонента. Как и мы, компоненты рождаются, делают некоторые вещи во время их времени на земле, а затем они умирают ☹️
Но в отличие от нас, жизненные этапы компонента немного разные. Вот что похоже:
Давайте сломаем это изображение вниз. Каждый цветной горизонтальный прямоугольник представляет собой метод жизненного цикла (за исключением «обновлений реагирования DOM и REF»). Столбцы представляют разные Этапы в компонентах жизни.
Компонент может быть только на одном этапе. Начинается с монтажа и перемещается на обновление. Он остается обновлением постоянно, пока он не удастся с виртуального дома. Затем он попадает в размонтирующую фазу и удаляется из DOM.
Методы жизненного цикла позволяют нам запустить код в определенных точках в жизни компонента или в ответ на изменения в жизни компонента.
Давайте пройдемся через каждую стадию компонента и связанные с ними методы.
Монтаж
Поскольку классовые компоненты – это классы, отсюда и имя, первый метод, который работает Конструктор метод. Как правило, Конструктор где вы будете инициализировать состояние компонента.
Далее компонент работает getderedstatefromprops Отказ Я собираюсь пропустить этот метод, так как он имеет ограниченное использование.
Теперь мы приходим к оказывать Метод, который возвращает ваш JSX. Теперь реагируйте «крепления» на домо.
Наконец, ComponentDidmount метод работает. Вот где вы будете делать какие-либо асинхронные вызовы к базам данных или напрямую манипулируют DOM, если вам нужно. Так же, наш компонент рождается.
Обновление
Эта фаза срабатывает каждый раз или реквизит изменения. Как в монтаже, getderedstatefromprops называется (но нет конструктор на этот раз!).
Следующий должен быть необходим бежит. Здесь вы можете сравнить старых реквизитов/штата с новым набором реквизита/штата. Вы можете определить, должен ли ваш компонент повторно отображать или не возвращать TRUE или FALSE. Это может сделать ваше веб-приложение более эффективным, отрезавшись от дополнительных рендеров. Если должен быть необходим Возвращает false, это цикл обновления заканчивается.
Если нет, отреагируйте повторные рендеры и getsnapshotbeforeupdate бежит впоследствии. Этот метод также имеет ограниченное использование. Реагировать затем проходит ComponentDidupdate Отказ Как ComponentDidmount Вы можете использовать его, чтобы сделать любые асинхронизированные звонки или манипулировать домом.
Отключение
Наш компонент жил хорошей жизнью, но все хорошие вещи должны дойти до конца. Фаза размонтирования – это последний этап жизненного цикла компонента. Когда вы удаляете компонент из DOM, RECT RID RIDS ComponentWillunmount прямо до его удаления. Вы должны использовать этот метод для очистки любых открытых соединений, таких как WebSockets или интервалы.
Другие методы жизненного цикла
Прежде чем перейти на следующую тему, давайте кратко поговорим о ForceUpdate и getderedstatefromerror Отказ
ForceUpdate это метод, который непосредственно вызывает переназначение. Хотя для него можно избежать нескольких случаев использования, его следует избегать.
getderedstatefromerror С другой стороны, это метод жизненного цикла, который не является непосредственно частью жизненного цикла компонента. В случае ошибки в компоненте getderedstatefromerror Запускается, и вы можете обновить состояние, чтобы отразить, что произошла ошибка. Используйте этот метод обильно.
Следующее Кодепен фрайпт Показывает шаги в фазе монтажа:
Понимание жизненного цикла и методов компонента реагирования позволит вам поддерживать правильные события потока данных и обрабатывать события в вашем приложении.
2. Компоненты высшего порядка
Возможно, вы использовали компоненты более высокого порядка, или HOCS, уже. Redux’s соединить Функция, например, является функцией, которая возвращает HOC. Но что именно является HOC?
От реагирования документов:
Возвращаясь к функции Connect Redux, мы можем посмотреть следующий фрагмент кода:
const hoc = connect(state => state)const WrappedComponent = hoc(SomeComponent)
Когда мы называем соединить Мы получаем HOC обратно, что мы можем использовать, чтобы обернуть компонент. Отсюда мы просто проходим наш компонент в HOC и начните использовать компонент нашего возвращения HOC.
Какие HOCS позволяют нам делать, – это абстрактная общая логика между компонентами в единый всеобъемлющий компонент.
Хорошее использование случая для HOC является авторизация. Вы можете написать код аутентификации в каждом компонент, который ему нужен. Это бы быстро и излишне раздувает ваш код.
Давайте посмотрим, как вы можете сделать авторитет для компонентов без Hoc:
Использование HOCS, вы можете сделать что-то вроде:
Вот работает Кодепен фрайпт для вышеуказанного кода.
Глядя на вышеуказанный код, вы можете видеть, что мы можем сохранить наши регулярные компоненты очень простыми и «глупыми», пока все еще обеспечивая аутентификацию для них. Authwrapper Компонент поднимает всю логику аутентификации в объединяющий компонент. Все это делает, это принять опоры под названием isloggedin и возвращает Зарченокомпонент или тег абзаца на основе того, является ли этот опора истина или неверно.
Как видите, HOCS чрезвычайно полезен, потому что они позволяют нам повторно использовать код и удалить вкус. Мы получим больше практики с этим в ближайшее время!
3. Состояние реагирования и установка ()
Большинство из вас, вероятно, использовали государство реагирования, мы даже использовали его в нашем примере HOC. Но важно понимать, что, когда происходит изменение состояния, Rect выздоровеет повторную визуализацию на этом компонент (если вы не укажете в Combolponentupdate
Теперь давайте поговорим о том, как мы меняемся состояние. Единственный способ изменить состояние – это через SetState метод. Этот метод принимает объект и объединяет его в текущее состояние. На вершине этого есть несколько вещей, которые вы также должны знать об этом.
Во-первых, SetState асинхронный. Это означает, что состояние не будет обновляться точно после того, как вы звоните SetState И это может привести к некоторому усугубительному поведению, которое мы надеемся, теперь смогу избежать!
Глядя на вышеуказанное изображение, вы можете увидеть, что мы называем SetState а потом console.log Состояние сразу после. Наша новая счетчик счетчиков Должен быть 1, но это на самом деле 0. Так что, если мы хотим получить доступ к новому состоянию после SetState На самом деле обновляет состояние?
Это приводит нас к следующему знанию, которое мы должны знать о SetState И это может сделать функцию обратного вызова. Давайте исправить наш код!
Отлично, это работает, теперь мы закончили правильно? Не совсем. Мы на самом деле не используем SetState правильно в этом случае. Вместо того, чтобы пройти объект к SetState мы собираемся дать ему функцию. Этот шаблон обычно используется, когда вы используете текущее состояние для установки нового состояния, как в нашем примере выше. Если вы не делаете этого, не стесняйтесь пропускать объект к SetState Отказ Давайте обновим наш код снова!
Вот …| Кодепен Для вышеуказанного SetState код.
Какой смысл передавать функцию вместо объекта? Потому что SetState асинхронно, полагаясь на него, чтобы создать нашу новую ценность, будут иметь некоторые подводные камни. Например, к тому времени SetState бежит, еще один SetState мог иметь мутируемое состояние. Прохождение SetState Функция дает нам два преимущества. Во-первых, это позволяет нам предпринять статическую копию нашего государства, которое никогда не изменится самостоятельно. Второе в том, что это будет очередь SetState звонки, поэтому они бегают в порядке.
Просто посмотрите на следующий пример, где мы пытаемся увеличить счетчик на 2, используя два подряд SetState Звонки:
Приведенное выше то, что мы видели раньше, пока у нас есть исправление ниже.
Кодепен для вышеуказанного кода.
На первом изображении оба SetState Функции напрямую используют this.state.counter И как мы узнали ранее, this.state.counter все еще будет ноль после первого SetState называется. Таким образом, мы получаем 1 вместо 2, потому что оба SetState Функции устанавливаются счетчик до 1.
Во втором картине мы проходим SetState Функция, которая гарантирует оба SetState Функции выполняются в порядке. На вершине этого он берет моментальный снимок состояния, а не использовать текущее, не обновленное состояние. Теперь мы получаем наш ожидаемый результат 2.
И это все, что вам нужно знать о состоянии реагирования!
4. Реагистрировать контекст
Это теперь приносит нам реагировать контекст, который является просто глобальным состоянием для компонентов.
API React Context позволяет создавать глобальные объекты контекста, которые могут быть предоставлены любым компоненте, который вы делаете. Это позволяет вам обмениваться данными без того, чтобы пройти отпородок домой через DOM.
Так как мы используем контекст?
Сначала создайте объект контекста:
const.createContext ({foo: “Бар”})
Реагистрационные документы описывают настройку контекста в компоненте, как так:
Myclass.contexttype;
Однако в кодепене (Rection 16.4.2), это не работало. Вместо этого мы собираемся использовать HOC, чтобы потреблять контекст аналогичным образом, к тому, что Дэн Абрамов рекомендует Отказ
Что мы делаем, это упаковывать наш компонент с Context.Consumer компонент и передача в контексте как опоры.
Теперь мы можем написать что-то вроде следующего:
И у нас будет доступ к Foo из нашего объекта контекста в реквизитах.
Как мы изменим контекст, вы можете спросить. К сожалению, это немного сложнее, но мы можем снова использовать HOC, и это может выглядеть так:
Давайте пройдемся через это. Во-первых, мы берем начальное состояние контекста, объект, который мы передали Ract.createContext () и установите его как состояние компонента нашей обертки. Далее мы определяем какие-либо методы, которые мы собираемся использовать для изменения нашего государства. Наконец, мы завершаем наш компонент в Context.Provider составная часть. Мы проходим в нашем состоянии и функционируйте на ценность. Теперь любые дети получат их в контексте, когда он завернут Context.Consumer составная часть.
Положить все вместе (HOCS опущены для краткости):
Теперь наш дочерний компонент имеет доступ к глобальному контексту. У него есть возможность менять Foo атрибут в состоянии до Баз Отказ
Вот ссылка на полную Кодепен для контекста.
5. Будьте в курсе реагирования!
Эта последняя концепция, вероятно, самая легкая для понимания. Это просто отстает от последних релизов реагирования. Реагируйте серьезные изменения в последнее время, и это только продолжит расти и развиваться.
Например, в реакции 16.3, определенные Методы жизненного цикла были обесначены, в реакции 16.6 Теперь мы получаем асинхронные компоненты , а в 16,7 мы получаем крючки которые стремятся заменить классные компоненты целиком.
Заключение
Спасибо за прочтение! Я надеюсь, что вы наслаждались и узнали много о реакции. Пока я надеюсь, что вы многому научились только от чтения, я призываю вас попробовать все эти функции/причуды для себя. Чтение – это одно, но единственный способ освоить это, чтобы сделать это сами!
Наконец, просто продолжать кодирование. Изучение новых технологий может показаться пугающим, но следующая вещь, которую вы знаете, вы будете реагировать экспертом.
Если у вас есть какие-либо комментарии, вопросы, или думаю, что я что-то пропустил, не стесняйтесь оставить их ниже.
Спасибо снова за чтение! Пожалуйста, поделитесь, бросьте ? ( или два), а счастливое кодирование.