React_3

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

Компоненты React
Компоненты можно определить различными способами. Первый способ - функциональный. Например:
Здесь определяется компонент Hello. Название компонентов должно начинаться с заглавной буквы.

Компоненты React
Второй способ определения компонентов предполагает использование классов ES6:
Для рендеринга компонента в классе компонента обязательно должен быть определен метод render(), который возвращает создаваемый элемент на JSX.

Компоненты React
Также для определения мы можем использовать стрелочные функции (arrow functions):

Применение компонентов
Используем выше определенный компонент Hello

Props
Props представляет коллекцию значений, которые ассоциированы с компонентом.
Эти значения позволяют создавать динамические компоненты, которые не зависят от жестко закодированных статических данных.
Функциональный подход:
Параметр props, который передается в функцию компонента, инкапсулирует свойства объекта. В частности, свойство name и age.
При рендеринге мы можем создать набор компонентов Hello, но передать в них разные данные для name и age. И таким образом, получим набор однотипной разметки html, наполненной разными данными.

Props
Использование классов ES6:
Класс компонента также извне получает объект свойств, который доступен через this.props.

Props
Использование классов ES6:
Класс компонента также извне получает объект свойств, который доступен через this.props.

Props
Использование стрелочных функций (arrow functions):

Props
Используем компонент Hello:
При рендеринге React передает значения атрибутов в виде единого объекта "props". То есть значение из атрибута name="Tom" перейдет в свойство props.name.
В итоге будет создана следующая страница:

Значения по умолчанию
Мы можем определить для свойств значения по умолчанию на тот случай, если их значения не передаются извне.
Если мы применяем классы, то для установки значений применяется статическое свойство defaultProps:

Значения по умолчанию
При функциональном определении компонента также применяется свойство defaultProps:

Значения по умолчанию
И в любом из этих случаев, если мы не определим какие-то свойства для компонента, то они будут брать значения из значений по умолчанию:

Обновление props
Сам this.props представляет неизменяемый объект, который предназначен только для чтения. Поэтому не следует его изменять, например:
Если же надо время то времени изменять какие-то внутренние данные компонента, то для хранения таких данных в React предназначен объект state, который будет рассмотрен далее

События
Обработка событий элементов в React во многом похожа на обработку событий элементов DOM с помощью обычного JavaScript. В то же время есть небольшие отличия:
События в React используют camelCase (в стандартном html "onclick", в React - "onClick")
В JSX в обработчик события передается функция компонента, а не строка.
В React можно применять разные способы определения и вызова событий. Возьмем простейшую задачу - обработка нажатия кнопки.

События
Возьмем простейшую задачу - обработка нажатия кнопки.
Распространенный подход заключается в установке привязки события в конструкторе компонента:
Здесь используется событие нажатия кнопки, которое задается через атрибут onClick (не onclick).

Этому атрибуту в качестве обработчика события передавалась функция this.press, которая определена в классе компонента. И при нажатии на кнопку будет вызываться функция press, которая с помощью функции alert отображает окно с некоторым уведомлением.
Главная сложность при использовании событий - это работа с ключевым словом this, которое указывает на текущий объект, в данном случае компонент.
По умолчанию в функцию обработчика не передается текущий объект, поэтому this будет иметь значение undefined. И ни к каким свойствам и методам компонента через this мы обратиться не сможем. И чтобы в метод press корректно передавалась ссылка на текущий объект через this, в конструкторе класса прописывается вызов:
События

Используем компонент на веб-странице:
События

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

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

React использует концепцию SyntheticEvent - специальных объектов, которые представляют собой обертки для объектов событий, передаваемых в функцию события. И используя такой объект, мы можем получить в обработчике события всю информацию о событии:
Получение информации о событии
Параметр e - это и есть информация о событии, которая передается в обработчик системой и которую мы можем использовать при обработке.

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае можно вызвать обработчик через стрелочную функцию:
Передача параметров в обработчик события
<br> class PrintButton extends React.Component {<br>constructor(props) {<br> super(props);<br>this.print = this.print.bind(this);<br> }<br> print(name, age){<br> console.log(`Name ${name} Age: ${age}`);<br> }<br> render() {<br> return <div> <br> <button onClick={() => this.print("Bob", 23)}>Print Bob</button><br> <button onClick={() => this.print("Tom", 36)}>Print Tom</button><br> </div>;<br> }<br> }<br>ReactDOM.render(<br> <PrintButton />,<br> document.getElementById("app")<br> )<br>

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае можно вызвать обработчик через стрелочную функцию:
Передача параметров в обработчик события
<br> class PrintButton extends React.Component {<br>constructor(props) {<br> super(props);<br>this.print = this.print.bind(this);<br> }<br> print(name, age){<br> console.log(`Name ${name} Age: ${age}`);<br> }<br> render() {<br> return <div> <br> <button onClick={() => this.print("Bob", 23)}>Print Bob</button><br> <button onClick={() => this.print("Tom", 36)}>Print Tom</button><br> </div>;<br> }<br> }<br>ReactDOM.render(<br> <PrintButton />,<br> document.getElementById("app")<br> )<br>

Объект state описывает внутреннее состояние компонента, он похож на props за тем исключением, что состояние определяется внутри компонента и доступно только из компонента.
Если props представляет входные данные, которые передаются в компонент извне, то состояние хранит такие объекты, которые создаются в компоненте и полностью зависят от компонента.
Также в отличие от props значения в state можно изменять.
И еще важный момент - значения из state должны использоваться при рендеринге. Если какой-то объект не используется в рендерниге компонента, то нет смысла сохранять его в state.
Нередко state описывает какие-то визуальные свойства элемента, которые могут изменяться при взаимодействие с пользователем.
Например, кнопку нажали, и соответственно можно изменить ее состояние - придать ей какой-то другой цвет, тень и так далее. Кнопку нажали повторно - можно вернуть исходное состояние.
State

Единственное место, где можно установить объект state - это конструктор класса:
State
<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Единственное место, где можно установить объект state - это конструктор класса: State" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/868825/slide-25.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/868825/slide-25.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/868825/slide-25.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-25.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-25.jpg"><!----><div class="slides-content">class Hello extends React.Component {<br> constructor(props) {<br> super(props);<br> this.state = {welcome: "Добро пожаловать на сайт!"};<br> }<br> render() {<br> return <h1>{this.state.welcome}</h1>;<br> }<br> }<br> ReactDOM.render(<br> <Hello />,<br> document.getElementById("app")<br> )<br>
При определении конструктора компонента в нем должен вызываться конструктор базового класса, в который передается объект props.

Для обновления состояния вызывается функция setState():
Обновление состояния
Изменение состояния вызовет повторный рендеринг компонента, в соответствии с чем веб-страница будет обновлена.
В то же время не стоит изменять свойства состояния напрямую, например:
В данном случае изменения повторного рендеринга компонента происходить не будет.
При этом нам не обязательно обновлять все его значения. В процессе работы программы мы можем обновить только некоторые свойства. Тогда необновленные свойства будут сохранять старые значения.

Обновление состояния
<br> class ClickButton extends React.Component {<br>constructor(props) {<br> super(props);<br> this.state</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Обновление состояния class ClickButton extends React.Component { constructor(props) { super(props); this.state =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/868825/slide-27.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/868825/slide-27.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/868825/slide-27.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-27.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-27.jpg"><!----><div class="slides-content">= {class: "off", label: "Нажми"};<br>this.press = this.press.bind(this);<br> }<br> press(){<br> let className = (this.state.class==="off")?"on":"off";<br> this.setState({class: className});<br> }<br> render() {<br> return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;<br> }<br> }<br>ReactDOM.render(<br> <ClickButton />,<br> document.getElementById("app")<br> )<br>
Здесь определен компонент ClickButton, который по сути представляет кнопку. В состоянии кнопки хранится два свойства - надпись и класс. При нажатии на кнопку мы будем переключать с одного класса на другой. Событие нажатия кнопки через атрибут onClick связано с методом press(), в котором переключается класс кнопки.
При этом свойство state.label остается неизменным.

Асинхронное обновление
При наличии нескольких вызовов setState() React может объединять их в один общий пакет обновлений для увеличения производительности.
Так как объекты this.props и this.state могут обновляться асинхронно, не стоит полагаться на значения этих объектов для вычисления состояния. Например:
Для обновления надо использовать другую версию функции setState(), которая в качестве параметра принимает функцию. Данная функция имеет два параметра: предыдущее состояние объекта state и объект props на момент применения обновления:

Асинхронное обновление
<br> class ClickButton extends React.Component {<br>constructor(props) {<br> super(props);<br> this.state =</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Асинхронное обновление class ClickButton extends React.Component { constructor(props) { super(props); this.state =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/868825/slide-29.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/868825/slide-29.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/868825/slide-29.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-29.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-29.jpg"><!----><div class="slides-content">{counter: 0};<br> this.press = this.press.bind(this);<br> }<br> press(){<br> this.setState({counter: this.state.counter + parseInt(this.props.increment)});<br> this.setState({counter: this.state.counter + parseInt(this.props.increment)});<br> }<br> render() {<br> return <div><br> <button onClick={this.press}>Count</button><br> <div>Counter: {this.state.counter} <br />Increment: {this.props.increment}</div><br> </div><br> }<br> }<br>ReactDOM.render(<br> <ClickButton increment="1" />,<br> document.getElementById("app")<br> )<br>
В props определено свойство increment - значение, на которое будет увеличиваться свойство counter в state (this.setState({counter: this.state.counter + parseInt(this.props.increment)});).
При чем при нажатии кнопки мы предполагаем, что функция setState() будет вызываться два раза, соответственно значение state.counter при нажатии кнопки должно увеличиваться на 2. Однако в реальности увеличение происходит лишь на 1:

Асинхронное обновление
<br> class ClickButton extends React.Component {<br>constructor(props) {<br> super(props);<br> this.state</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Асинхронное обновление class ClickButton extends React.Component { constructor(props) { super(props); this.state =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/868825/slide-30.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/868825/slide-30.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/868825/slide-30.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-30.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-30.jpg"><!----><div class="slides-content">= {counter: 0};<br>this.press = this.press.bind(this);<br> }<br> incrementCounter(prevState, props) {<br> return {<br> counter: prevState.counter + parseInt(props.increment)<br> };<br> }<br> press(){<br> this.setState(this.incrementCounter);<br> this.setState(this.incrementCounter);<br> }<br> render() {<br> return <div><br> <button onClick={this.press}>Count</button><br> <div>Counter: {this.state.counter}<br /> Increment: {this.props.increment}</div><br> </div><br> }<br> }<br>ReactDOM.render(<br> <ClickButton increment="1" />,<br> document.getElementById("app")<br> )<br>
Теперь изменим код, применив второй вариант функции setState():
Чтобы избежать повторения, все действия по инкременту вынесены в отдельную функцию - incrementCounter, однако опять же функция setState() вызывается два раза. И теперь инкремент будет срабатывать два раза при однократном нажатии, собственно как и определено в коде и как и должно быть:

Жизненный цикл компонента
В процессе работы компонент проходит через ряд этапов жизненного цикла. На каждом из этапов вызывается определенная функция, в которой мы можем определить какие-либо действия:
constructor(props): конструктор, в котором происходит начальная инициализация компонента
static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента. Этот метод не имеет доступа к текущему объекту компонента (то есть обратиться к объекту компоненту через this) и должен возвращать объект для обновления объекта state или значение null, если нечего обновлять.
render(): рендеринг компонента
componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
componentWillUnmount(): вызывается перед удалением компонента из DOM

Жизненный цикл компонента
Кроме этих основных этапов или событий жизненного цикла, также имеется еще ряд функций, которые вызываются при обновлении состояния после начального рендеринга компонента, если в компоненте происходят обновления:
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state. В качестве параметра передаются новый объект props и state. Эта функция должна возвращать true (надо делать обновление) или false (игнорировать обновление). По умолчанию возвращается true. Но если функция будет возвращать false, то тем самым мы отключим обновление компонента, а последующие функции не будут срабатывать.
render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед компонента. Он позволяет компоненту получить информацию из DOM перед возможным обновлением. Возвращает в качестве значения какой-то отдельный аспект, который передается в качестве третьего параметра в метод componentDidUpdate() и может учитываться в componentDidUpdate при обновлении. Если нечего возвращать, то возвращается значение null
componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate

Жизненный цикл компонента
Применим некоторые из событий жизненного цикла:
<br> class ClickButton</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Жизненный цикл компонента Применим некоторые из событий жизненного цикла: class ClickButton extends" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/868825/slide-33.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/868825/slide-33.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/868825/slide-33.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-33.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/868825/slide-33.jpg"><!----><div class="slides-content">extends React.Component {<br>constructor(props) {<br> super(props);<br> this.state = {class: "off", label: "Нажми"};<br>this.press = this.press.bind(this);<br>console.log("constructor");<br> }<br> static getDerivedStateFromProps(props, state) {<br> console.log("getDerivedStateFromProps()");<br> return null;<br> }<br> componentDidMount(){<br> console.log("componentDidMount()");<br> }<br> componentWillUnmount(){<br> console.log("componentWillUnmount()");<br> }<br> shouldComponentUpdate(){<br> console.log("shouldComponentUpdate()");<br> return true;<br> }<br> getSnapshotBeforeUpdate(prevProps, prevState) {<br> console.log("getSnapshotBeforeUpdate()");<br> return null;<br> }<br> componentDidUpdate(){<br> console.log("componentDidUpdate()");<br> }<br> press(){<br> var className = (this.state.class==="off")?"on":"off";<br> this.setState({class: className});<br> }<br> render() {<br> console.log("render()");<br> return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;<br> }<br> }<br> ReactDOM.render(<br> <ClickButton />,<br> document.getElementById("app")<br> )<br>