Компоненты React - свойства и состояния в ReactJS с примерами

«В React все является компонентом»

Если вы знакомы с React, то наверняка слышали или читали эту фразу много раз. Но знаете ли вы, что именно это означает и как его использовать? Если вы этого не сделаете, прочтите этот блог, чтобы узнать все о компонентах React и различных этапах жизненного цикла. Я уверен, когда ты закончишь Прочитав этот блог, вы получите полное представление о компонентах React и связанных с ним концепциях. Но прежде чем продолжить, взгляните на темы, которые я буду обсуждать:

как использовать python в анаконде

• Что такое компоненты React?
• Преимущества компонентов React
• Реквизит
• состояния
• Состояния против реквизита
• Жизненный цикл компонента React

Что такое компоненты React?

Раньше разработчикам приходилось писать 1000 строк кода для разработки простого одностраничного приложения. Большинство этих приложений следовали традиционной структуре DOM, и внесение в них изменений было очень сложной и утомительной задачей для разработчиков.Им приходилось вручную искать элемент, который требовал изменения, и соответствующим образом обновлять его. Даже небольшая ошибка приведет к сбою приложения. Более того, обновление DOM было очень дорогим. Таким образом, был введен компонентный подход. При таком подходе все приложение делится на логические части, которые называются Компонентами. React был одним из фреймворков, выбравших этот подход.Если вы планируете построить свою карьеру в веб-разработке, ранний старт откроет для вас множество возможностей.

Давайте теперь разберемся, что это за компоненты.

Компоненты React считаются строительными блоками пользовательского интерфейса. Каждый из этих компонентов существует в одном и том же пространстве, но выполняется независимо друг от друга. Компоненты React имеют свою собственную структуру, методы и API. Их можно использовать повторно и при необходимости можно вводить в интерфейсы. Чтобы лучше понять, рассмотрите весь пользовательский интерфейс как дерево.Здесь начальный компонент становится корнем, а каждая из независимых частей становится ветвями, которые далее делятся на подветви.

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

Мы используем React.createClass () метод создания компонента. Этому методу необходимо передать аргумент объекта, который будет определять компонент React. Каждый компонент должен содержать ровно один render () метод. Это наиболее важное свойство компонента, отвечающего за разбор HTML в JavaScript, JSX. Эта render () вернет HTML-представление компонента в виде узла DOM. Следовательно, все HTML-теги должны быть заключены во включающий тег внутри render () .

Ниже приведен пример кода для создания компонента.

импортировать React из 'response' импортировать ReactDOM из класса 'react-dom' MyComponent extends React.Component {render () {return (
Ваш идентификатор: {this.state.id}
)}} ReactDOM.render (, document.getElementById ('контент'))

Состояния против реквизита

Жизненный цикл компонента React

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

1. Начальная стадия
2. Фаза обновления
3. Реквизит изменить фазу
4. Фаза размонтирования

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

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

1. getDefaultProps (): Этот метод используется для указания значения по умолчанию для this.props . Он вызывается до того, как ваш компонент будет создан или ему будут переданы какие-либо реквизиты от родителя.
2. getInitialState (): Этот метод используется дляуказывать значение по умолчанию this.state перед созданием вашего компонента.
3. componentWillMount (): Это последний метод, который вы можете вызвать перед тем, как ваш компонент будет отрисован в DOM. Но если ты позвонишь setState () внутри этого метода ваш компонент не будет повторно отрисовываться.
4. render (): Чт Этот метод отвечает за возврат одного корневого узла HTML и должен быть определен в каждом компоненте. Ты можешь вернуться значение NULL или ложный если вы не хотите ничего рендерить.
5. componentDidMount (): После того, как компонент отрисован и помещен в DOM, этот вызывается метод. Здесь вы можете выполнять любые операции запросов к DOM.

б. Фаза обновления - После добавления компонента в DOM они могут обновляться и повторно отрисовываться только при изменении состояния. Каждый раз, когда состояние изменяется, компонент вызывает свое render () очередной раз. Любой компонент, который полагается на вывод этого компонента, также будет вызывать его render () очередной раз. Это сделано для того, чтобы наш компонент отображал самую последнюю версию самого себя. Таким образом, для успешного обновления состояния компонентов в заданном порядке вызываются следующие методы:

1. shouldComponentUpdate (): Используя этот метод, вы можете контролировать поведение вашего компонента при обновлении самого себя. Если вы вернете истину из этого метода,компонент обновится. Иначе, если этот метод возвращаетложный, компонент пропустит обновление.
2. componentWillUpdate (): Тего метод называется jнезадолго до того, как ваш компонент будет обновлен. В этом методе вы не можете изменить состояние вашего компонента, вызвав this.setState .
3. render (): Если вы возвращаете false через shouldComponentUpdate () , код внутри render () будет вызываться снова, чтобы убедиться, что ваш компонент отображается правильно.
4. componentDidUpdate (): После обновления и визуализации компонента вызывается этот метод. Вы можете поместить в этот метод любой код, который хотите выполнить после обновления компонента.

c. Фаза изменения реквизита - После компонент был отрисован в DOM, единственный другой раз, когда компонент будет обновляться, помимо изменения состояния, - это когда его значение свойства изменится. Практически этот этап работает аналогично предыдущему, но вместо состояния он имеет дело с реквизитами. Таким образом, у этого этапа есть только один дополнительный метод из этапа обновления.

1. componentWillReceiveProps (): Этот метод возвращает один аргумент, содержащий новое значение свойства, которое будет присвоено компоненту.
   Остальные методы жизненного цикла ведут себя идентично методам, которые мы видели на предыдущем этапе.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

d.Фаза демонтажа -Это последняя фаза жизненного цикла компонентов, на которой компонент полностью уничтожается и удаляется из DOM. Он содержит только один метод:

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

Ниже представлена ​​полная диаграмма жизненного цикла:

На этом мы подошли к концу блога о компонентах React. Надеюсь, в этом блоге я смог четко объяснить, что такое React Components, как они используются. Вы можете сослаться на мой блог на , если вы хотите узнать больше о ReactJS.

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

Есть вопрос к нам? Пожалуйста, отметьте это в разделе комментариев, и мы свяжемся с вами.