React хорошо зарекомендовал себя в техническом сообществе, и существует множество ресурсов, чтобы начать работу с ним. Тем не менее, для тех, кто только начинает работать с React, это все еще может показаться непосильным. Из-за огромного количества различных ресурсов для изучения React поначалу может быть сложно понять, с чего начать. Для начала хорошо иметь четкое представление о том, как работает React. Это позволит вам чувствовать себя более уверенно в том, что вы создаете, и почему вы используете такие методы, как render, setState и другие. Давайте рассмотрим некоторые основы React в простой точечной форме, чтобы изучить некоторые основные концепции.

Давайте начнем с того, что такое React? И зачем его использовать?

  • React — это библиотека JavaScript, которая используется для создания пользовательских интерфейсов.
  • Используется в одностраничных веб-приложениях.
  • React быстрый и масштабируемый!
  • Позволяет нам создавать повторно используемые компоненты

рендеринг()

  • Метод, который должен иметь каждый компонент на основе классов в React.

setState()

  • Когда setState вызывается, React создаст новый виртуальный DOM. Затем он сравнит виртуальный DOM с реальным DOM и обновит все внесенные изменения.
  • setState позволяет компоненту изменять свое внутреннее состояние
  • setState сообщит приложению, что некоторые данные были изменены. Виртуальный DOM будет повторно отображать и сравнивать предыдущий виртуальный DOM с новым виртуальным DOM и, наконец, обновлять реальный DOM с необходимыми изменениями.

ReactDOM.render()

Примет два аргумента:

1. Первый аргумент — это компонент, который вы хотите отобразить.

  • Обычно это родительский компонент приложения, который помещается в ReactDOM.render(), и все его дочерние компоненты также будут отображаться.

2. Второй аргумент — это DOM-узел, который вы хотите отобразить.

JSX

  • Обозначает Javascript XML
  • HTML-подобный синтаксис
  • JSX преобразуется в объекты javascript, которые React затем берет и формирует в своем виртуальном DOM.

Виртуальный DOM

  • React обновляет виртуальный DOM вместо реального DOM
  • Виртуальный DOM — это легкий объект JavaScript, который является копией реального DOM.
  • Каждый раз, когда вызывается setState, React создает целый виртуальный DOM. Если есть обновления, которые были сделаны, эти изменения затем произойдут в реальном DOM.
  • Реальный DOM изначально не изменяется, потому что React значительно быстрее создает виртуальный DOM, а затем только обновляет реальный DOM с внесенными изменениями.

состояние

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

при изменении

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

`ввод

тип = «текст»

значение={это.состояние.сообщение}

onChange={this.handleChange()}

/>`

реквизит

  • Данные, которые передаются от родительского компонента к дочернему компоненту
  • Позволяет родительскому компоненту передавать данные дочерним компонентам через свойства

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

Жизненный цикл компонента имеет множество различных методов. Если вы хотите прочитать о каждом из них, эта статья действительно полезна. Я обнаружил, что чаще всего используются два метода: componentDidMount() и componentWillUnmount().

компонентDidMount()

  • Вызывается после монтирования компонента в DOM
  • Это хорошо для запроса AJAX для получения некоторых данных.

componentWillUnmount()

  • Вызывается непосредственно перед размонтированием компонента
  • Хорошо очищает слушателей