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()
- Вызывается непосредственно перед размонтированием компонента
- Хорошо очищает слушателей