Последние две недели я изучал React в рамках Модуля 4 на учебном курсе по разработке программного обеспечения Flatiron Software. Вот что я узнал на данный момент!
Что такое React?
React - это библиотека JavaScript, используемая в веб-разработке для создания интерактивных элементов на веб-сайтах. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний.
Его можно использовать как основу при разработке веб-сайтов и мобильных приложений, создавая интерактивный и динамичный пользовательский интерфейс.
Некоторые из основных функций React включают:
Компоненты
Реквизит
Штат
Методы жизненного цикла
Что такое компоненты React?
Компоненты React - это строительные блоки приложения React. Компонент - это в основном класс или функция Javascript, которые могут принимать входные данные (свойства) и возвращать элемент React, который описывает, как должен выглядеть пользовательский интерфейс. Компоненты являются либо компонентами класса, либо функциональными компонентами.
Функциональные компоненты
Функциональные компоненты - это буквально функции Javascript, как в примере ниже:
Эта функция является допустимым компонентом React, поскольку она принимает единственный аргумент объекта «props» с данными и возвращает элемент React.
Обычно предпочтительно использовать функциональные компоненты там, где это возможно, поскольку они предсказуемы и лаконичны. Поскольку они чисто презентационные, их результаты всегда одинаковы при одинаковых реквизитах.
Функциональные, потому что они в основном являются функциями Javascript
Без гражданства, потому что они не удерживают и не управляют каким-либо состоянием
Презентационные, потому что все, что они делают, - это вывод элементов пользовательского интерфейса.
Компоненты класса
Этот класс ниже также является допустимым компонентом React и эквивалентен указанному выше компоненту с точки зрения React, однако компонент класса будет иметь некоторые дополнительные функции.
Компоненты класса могут содержать логику, например обрабатывать события onClick, иметь локальное состояние и другие возможности.
Класс, потому что они в основном классы
Stateful, потому что они могут удерживать или управлять локальным состоянием
Контейнер, потому что они обычно содержат другие компоненты
Излишнее использование компонентов класса может отрицательно сказаться на производительности, а также на удобочитаемости кода, ремонтопригодности и тестируемости.
Когда выбирать, какой тип компонента использовать?
Используйте компонент класса, если вы:
Необходимо управлять местным государством
Необходимо добавить методы жизненного цикла к вашему компоненту
Необходимо добавить логику для обработчиков событий
Реквизит
React позволяет нам передавать единицы информации от родительского компонента к дочернему компоненту. Мы называем это реквизитом!
Эти значения могут быть любыми - строками, объектами (включая массивы и функции) и т. Д. Свойства позволяют нам сделать наши компоненты более динамичными и более пригодными для повторного использования.
Они доступны только для чтения, и компонент никогда не может изменять переданные ему свойства. Когда компоненту передаются реквизиты в качестве входных данных, он всегда должен возвращать один и тот же результат для одного и того же входа.
Пример передачи данных с помощью свойств от одного компонента к другому:
Это вернет:
Штат
Компоненты React имеют встроенный объект состояния. В объекте состояния хранятся значения свойств, принадлежащих компоненту.
В отличие от свойств компонента, состояние может меняться в течение жизни компонента. Состояние - это данные, которые изменены в вашем компоненте. State предоставляет нам метод обновления информации в компоненте без требования, чтобы его родитель каким-либо образом отправлял обновленную информацию.
Это относится к локальному состоянию компонента, которое не может быть изменено или доступно за пределами компонента - его можно использовать и изменять только внутри компонента.
Объект состояния инициализируется в конструкторе и может содержать сколько угодно свойств:
setState ()
setState () - единственный законный способ обновить состояние после начальной настройки.
Он планирует обновление объекта state компонента. При изменении состояния компонент отвечает повторным рендерингом.
В чем разница между Props и State?
Оба они являются объектами Javascript, содержащими информацию, которая влияет на вывод рендеринга, однако состояние управляется внутри компонента, тогда как свойства передаются компоненту.
Методы жизненного цикла
Методы жизненного цикла React - это, по сути, серия событий, которые происходят от рождения компонента React до его смерти.
Монтаж - Рождение вашего компонента
Обновление - Рост вашего компонента
Размонтировать - Смерть вашего компонента
render ()
Метод render () - наиболее часто используемый метод жизненного цикла. Вы увидите это во всех классах React. Это связано с тем, что render () - единственный требуемый метод в компоненте класса в React.
Он обрабатывает отрисовку вашего компонента в пользовательском интерфейсе. Это происходит при установке и обновлении вашего компонента.
componentDidMount ()
Когда компонент создается изначально, он монтируется в DOM. componentDidMount () вызывается сразу после метода рендеринга - как только компонент смонтирован и готов. Это хорошее место для инициирования вызовов API, если вам нужно загрузить данные с удаленной конечной точки.
В отличие от метода render (), componentDidMount () позволяет использовать setState (). Вызов setState () здесь обновит состояние и вызовет другой рендеринг, но это произойдет до того, как браузер обновит пользовательский интерфейс, чтобы пользователь не видел никаких обновлений пользовательского интерфейса с двойным рендерингом.
componentDidUpdate ()
Каждый раз, когда состояние или свойства компонента изменяются, он повторно отображается на странице. Метод componentDidUpdate () вызывается сразу после обновления. Наиболее распространенный вариант использования метода componentDidUpdate () - это обновление модели DOM в ответ на изменения свойств или состояния.
componentWillUnmount ()
Этот метод жизненного цикла вызывается непосредственно перед размонтированием и уничтожением компонента. Этот компонент никогда не будет повторно отрисован, и в результате мы не можем вызвать setState () во время этого метода жизненного цикла.
Преимущества React
- Использует виртуальную модель DOM, которая является объектом JavaScript. Это улучшит производительность приложений, поскольку виртуальная модель DOM JavaScript работает быстрее, чем обычная модель DOM.
- Может использоваться на стороне клиента и сервера, а также с другими фреймворками.
- Компоненты и шаблоны данных улучшают читаемость, что помогает поддерживать более крупные приложения.
