Прочтите эту короткую, по существу статью, поскольку она проведет вас через наиболее фундаментальные и важные концепции React Js.

Начиная с деталей фона

React - это библиотека JavaScript, цель которой - упростить разработку визуальных интерфейсов. Разработанный в Facebook и выпущенный в 2013 году, он управляет одним из наиболее широко используемых в мире программных кодов, которыми пользуются многие компании-разработчики программного обеспечения.

Большое заблуждение

React - это «библиотека» JavaScript. Это не совсем «каркас». Это не полное решение, и вам часто потребуется использовать больше библиотек с React для создания любого решения. React ничего не предполагает о других частях в любом решении.

Фреймворки служат прекрасной цели, особенно для молодых команд и стартапов. При работе с фреймворком многие разумные дизайнерские решения уже принимаются за вас, что дает вам четкий путь к написанию хорошей логики на уровне приложения. Однако у фреймворков есть некоторые недостатки. Для опытных разработчиков, работающих с большими кодовыми базами, эти недостатки иногда мешают.

Фреймворки не гибкие, хотя некоторые так утверждают. Фреймворк обычно хочет, чтобы вы все кодировали определенным образом. Если вы попытаетесь отклониться от этого пути, фреймворк обычно начинает бороться с вами по этому поводу. Фреймворки также обычно большие и полны функций. Если вам нужно использовать только небольшую часть из них, вы все равно должны включить их целиком. Правда, сегодня этот момент меняется, но он все еще не идеален.

Давайте начнем с основ

Фрагмент

Для пользователей VS Code вот несколько полезных фрагментов:

Имя расширения: ES7 React / Redux / GraphQL / React-Native фрагменты.

  • rce - ›Создает компонент на основе классов
  • rfce - ›Создает функциональный компонент
  • rconst - ›Создает конструктор для класса

Есть много других расширений, и именно они используются наиболее часто.

Методы жизненного цикла

Монтаж

Когда экземпляр компонента создается или вставляется в DOM

  • конструктор
  • статический getDerivedStateFromProps
  • оказывать
  • componentDidMount

Обновление

Когда компонент повторно отрисовывается в результате изменения его свойств или состояния.

  • статический shouldComponentUpdate
  • shouldComponentMount
  • оказывать
  • getSnapBeforeUpdate
  • componentDidUpdate

Размонтирование

Когда компонент удаляется из DOM

  • componentWillUnmount

Обработка ошибок

Когда возникает ошибка во время рендеринга, в методе жизненного цикла или в конструкторе дочернего компонента

  • статический getDerivedStateFromError
  • componentDidCatch

Фрагменты

Обычный шаблон в React - компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов к DO.

Чистый компонент

Чистый компонент повторно отображает компонент класса только при поверхностном сравнении свойств и состояния. Это приводит к повышению производительности. Он работает только с компонентами на основе классов.

Заметка

Это компонент более высокого порядка. Чем чистый компонент относится к компоненту на основе классов, а мем - к функциональным компонентам

Ссылки

Refs позволяет получить доступ к узлам DOM в React. Есть два действительных подхода: -

  • React.createRef () метод
  • Метод обратного вызова.

Ссылки могут использоваться как с функциональным, так и с классовым компонентом. Ссылки также могут передаваться из родительского компонента в дочерний компонент.

Пересылка ссылки: ссылки также могут быть перенаправлены из родительского компонента в собственный компонент ввода с помощью forwardRef (собственный компонент, ref) метод. В основном дочерний компонент получает ссылку от родительского компонента и прикрепляет ее к собственному элементу ввода.

Порталы

Порталы React предоставляют способ рендеринга дочерних узлов в узел Dom, который существует вне иерархии DOM родительского компонента. Это дает возможность вырваться из дерева DOM. Он использует функцию ReactDOM.createPortal (JSX, id) .Portal, которая ведет себя как дочерний элемент React. Нам нужны порталы для работы с дочерним и родительским CSS

Граница ошибки

Граница ошибок - это компонент React, который обнаруживает ошибки JavaScript в дереве дочерних компонентов, регистрирует эти ошибки и отображает резервный пользовательский интерфейс. Компонент класса, реализующий один или оба метода жизненного цикла getDerivedStateFromError и componentDidCatch становится границей ошибки.

getDerivedStateFromError: это статический метод, который используется для отображения резервного пользовательского интерфейса после возникновения ошибки.
componentDidCatch: это метод, который используется для регистрации сообщение об ошибке.

Ошибка Граничная ошибка перехвата во время рендеринга в методах жизненного цикла и в конструкторе всего дерева под ними, однако они не отлавливают ошибки внутри обработчиков событий.

Компонент высшего порядка - HOC

Шаблон, в котором функция принимает компонент в качестве аргумента и возвращает новый улучшенный компонент. Он разделяет общие свойства внутри компонентов без необходимости повторения кода.

const newComponent = upperOrderComponent (originalComponent)
Нетехнический пример: const Ironman = withSuit (TonyStark)

Это приятный небольшой шаблон, который можно использовать для разделения общих функций между компонентами React.

Визуализация реквизита

Термин «свойство рендеринга» относится к методу совместного использования кода между компонентом React с использованием свойства, значение которого является функцией.

Контекст реакции

Контекст позволяет передавать данные через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне.
В основном он включает три шага:

  • Создайте контекст - используйте метод createContext (), а также экспортируйте компонент поставщика и потребителя.
  • Предоставьте значение контекста - на верхнем уровне включите компонент поставщика и передайте значение с помощью атрибута value.
  • Использовать значение контекста. Используйте компонент-потребитель и передайте функцию как дочернюю.

Погружение в крючки

Хуки - это новая функция в React 16.8, которая позволяет использовать функции React без необходимости писать класс. Концептуально компоненты React всегда были ближе к функциям. Хуки включают функции, но без ущерба для практического духа React. Хуки обеспечивают доступ к обязательным аварийным выходам и не требуют от вас изучения сложных функциональных или реактивных методов программирования.

Почему крючки?

Проблема-1

  • Понимание того, как это ключевое слово работает в JavaScript
  • Не забудьте привязать обработчики событий в классе Components
  • Классы не очень хорошо минимизируются и делают горячую перезагрузку очень ненадежной.

Проблема-2

  • Не существует определенного способа повторно использовать компонентную логику с отслеживанием состояния.
  • HOC и паттерн рендеринга решают эту проблему, но из-за этого становится сложнее следовать коду.
  • Необходимо лучше разделить логику с отслеживанием состояния

Проблема-3

  • При создании компонента для сложных сценариев связанный код не организован в одном месте

Правила ловушек

Что нужно помнить при работе с крючками

  • Только перехватчики вызова на верхнем уровне. Не вызывайте ловушки внутри цикла, условий или вложенных функций.
  • Вызов хуков только из функций React. Не вызывайте ловушки внутри обычных функций JavaScript.

Типы крючков

1 - useState

  • Хук useState позволяет добавлять состояние в функциональный компонент
  • В классах состояние всегда является объектом
  • С хуком useState состояние не обязательно должно быть объектом
  • Новое состояние зависит от значений предыдущего состояния

›_ UseEffect

Перехватчик эффектов позволяет выполнять побочные эффекты в функциональном компоненте.

Это близкая замена componentDidMount, componentDidUpdate и ComponentWillUnmount

›_ UseContext

Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.

›_ UseReducer

Это крючок, используемый для управления состоянием. Это альтернатива useState. Это более примитивный хук, чем useState.

›_ UseCallback

Is - это ловушка, которая возвращает запомненную версию функции обратного вызова, которая изменяется только в случае изменения одной из зависимостей.

Это полезно при передаче обратного вызова для оптимизации дочерних компонентов, которые полагаются на равенство ссылок для предотвращения ненужных повторных отрисовок.

{равенство ссылок проверяет, равны ли функции или нет. }

›_ UseMemo

Вы можете полагаться на useMemo как на оптимизацию производительности, а не как на семантическую гарантию. В будущем React может решить «забыть» некоторые ранее запомненные значения и пересчитать их при следующем рендеринге, например чтобы освободить память для компонентов вне экрана.

Разница между useCallback и useMemo

useCallback кэширует сам предоставленный экземпляр функции, тогда как useMemo вызывает предоставленную функцию и фиксирует ее результат.
Итак, если вам нужно кэшировать функцию, используйте ловушку useCallback, а если вам нужно кэшировать результаты функции, используйте ловушку useMemo.

›_ UseRef

Обычно используется для фокусировки полей ввода.
В целом его можно использовать для создания универсального контейнера, который может содержать изменяемое значение, подобное свойствам экземпляра компонентов класса.
Этот универсальный контейнер не вызывает повторной визуализации при изменении хранимых в нем данных.
В то же время он также запоминает сохраненные данные после того, как другая переменная состояния вызовет повторную визуализацию этого компонента.

Вышеупомянутые хуки используются в большинстве случаев, кроме них есть еще три крючка: -

  • useImperitiveHandle
  • useLayoutEffect

useDebugValue

Бонусная тема - Получение данных

Axios - это легкий HTTP-клиент, основанный на HTTP-сервисе и похожий на собственный JavaScript Fetch API. Axios основан на обещаниях, что дает вам возможность использовать асинхронность JavaScript и ожидать более читаемый асинхронный код.

npm install axios

Использование Axios и useEffect для получения данных в React

Использование Axios и useReducer для получения данных в React

Заключение

Эта статья должна была дать вам хорошее представление о ключевых концепциях React Js. Есть еще много всего, что нужно изучить и улучшить, но я надеюсь, что вы чувствуете себя уверенно, копаясь и играя, и реагируете сами сейчас.

Если вы в какой-то момент запутались и вам нужна дорожная карта для изучения React, вы можете обратиться к указанной ниже статье.



Практическая дорожная карта для разработки React
В этой короткой по существу статье я проведу вас через весь процесс изучения React и становления… codeburst.io



Пожалуйста, дайте мне знать, если что-то неясно или есть что-то еще, что вы хотели бы увидеть в этой или следующей статье. Не стесняйтесь обращаться ко мне в любое время, если хотите что-то обсудить. Буду более чем счастлив, если вы пришлете свои отзывы, предложения.

Спасибо, что дочитали до конца. Вы можете связаться со мной, если вам понадобится помощь:

Веб: https://portfolio.abhisheksrivastava.me/
Instagram: https://www.instagram.com/theprogrammedenthusiast/
LinkedIn: https://www.linkedin.com / in / abhishek-srivastava-49482a190 /
Github: https://github.com/abhishek2x
Электронная почта: [email protected]



abhishek2x - Обзор
ОБО МНЕ Я предприниматель по натуре и разработчик по энтузиазму, энтузиаст технологий, участник с открытым исходным кодом, технический… github.com