Компоненты класса React
До React 16.8 компоненты класса были единственным способом отслеживать состояние и жизненный цикл компонента React. Функциональные компоненты считались «без состояния».
С добавлением хуков функциональные компоненты теперь почти эквивалентны компонентам класса. Различия настолько незначительны, что вам, вероятно, никогда не понадобится использовать компонент класса в React.
Несмотря на то, что функциональные компоненты предпочтительны, в настоящее время нет планов по удалению компонентов класса из React.
Этот раздел даст вам обзор того, как использовать компоненты класса в React.
Вы можете пропустить этот раздел и вместо этого использовать функциональные компоненты.
Реагировать Компоненты
Компоненты — это независимые и многократно используемые фрагменты кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render().
Компоненты бывают двух типов: компоненты класса и компоненты функций. В этой главе вы узнаете о компонентах класса.
Создайте компонент класса
При создании компонента React имя компонента должно начинаться с заглавной буквы.
Компонент должен включать extends React.Component
оператор, этот оператор создает наследование React.Component и дает вашему компоненту доступ к функциям React.Component.
Для компонента также требуется render()
метод, этот метод возвращает HTML.
Пример
Создайте компонент класса с именемCar
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Теперь в вашем приложении React есть компонент Car, который возвращает
<h2>
элемент.
Чтобы использовать этот компонент в своем приложении, используйте синтаксис, аналогичный обычному HTML:
<Car />
Пример
Отобразите Car
компонент в «корневом» элементе:
ReactDOM.render(<Car />, document.getElementById('root'));
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Конструктор компонентов
Если
в вашем компоненте есть функция, эта функция будет вызываться при запуске компонента.constructor()
Функция конструктора — это место, где вы инициируете свойства компонента.
В React свойства компонента должны храниться в объекте с именем
state
.
Вы узнаете больше об state
этом позже в этом уроке.
В функции-конструкторе вы также соблюдаете наследование родительского компонента, включая super()
оператор, который выполняет функцию-конструктор родительского компонента, и ваш компонент имеет доступ ко всем функциям родительского компонента ( React.Component
).
Пример
Создайте функцию-конструктор в компоненте Car и добавьте свойство цвета:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}
Используйте свойство цвета в функции render():
Пример
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
Реквизит
Другой способ обработки свойств компонентов — использование props
.
Реквизиты похожи на аргументы функций, и вы отправляете их в компонент как атрибуты.
Вы узнаете больше об props
этом в следующей главе.
Пример
Используйте атрибут для передачи цвета компоненту Car и используйте его в функции render():
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Реквизит в конструкторе
Если у вашего компонента есть функция конструктора, реквизиты всегда должны передаваться конструктору, а также React.Component через super()
метод.
Пример
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));
Компоненты в компонентах
Мы можем ссылаться на компоненты внутри других компонентов:
Пример
Используйте компонент Car внутри компонента Garage:
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Компоненты в файлах
React — это повторное использование кода, и было бы разумно вставить некоторые из ваших компонентов в отдельные файлы.
Для этого создайте новый файл с .js
расширением файла и поместите в него код:
Обратите внимание, что файл должен начинаться с импорта React (как и раньше) и заканчиваться оператором export default Car;
.
Пример
Это новый файл, мы назвали его Car.js
:
import React from 'react';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
Чтобы иметь возможность использовать Car
компонент, вы должны импортировать файл в свое приложение.
Пример
Теперь мы импортируем Car.js
файл в приложение, и мы можем использовать
Car
компонент, как если бы он был создан здесь.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));
Состояние компонента класса React
Компоненты класса React имеют встроенный state
объект.
Вы могли заметить, что мы использовали state
ранее в разделе конструктора компонентов.
Объект state
— это место, где вы храните значения свойств, принадлежащих компоненту.
Когда state
объект изменяется, компонент перерисовывается.
Создание объекта состояния
Объект состояния инициализируется в конструкторе:
Пример
Укажите state
объект в методе конструктора:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Объект состояния может содержать сколько угодно свойств:
Пример
Укажите все свойства, которые нужны вашему компоненту:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Использование state
объекта
Обратитесь к state
объекту в любом месте компонента, используя
синтаксис:this.state.propertyname
Пример:
Обратитесь к state
объекту в
render()
методе:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
Изменение state
объекта
Чтобы изменить значение в объекте состояния, используйте this.setState()
метод.
Когда значение в state
объекте изменяется, компонент будет перерисовываться, что означает, что выходные данные будут меняться в соответствии с новыми значениями.
Пример:
Добавьте кнопку с onClick
событием, которое изменит свойство цвета:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
Всегда используйте setState()
метод для изменения объекта состояния, он гарантирует, что компонент знает, что он был обновлен, и вызывает метод render() (и все другие методы жизненного цикла).
Жизненный цикл компонентов
У каждого компонента в React есть жизненный цикл, за которым вы можете следить и которым можно управлять в течение трех его основных фаз.
Три этапа: монтирование , обновление и размонтирование .
Монтаж
Монтаж означает размещение элементов в DOM.
React имеет четыре встроенных метода, которые вызываются в этом порядке при монтировании компонента:
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
Этот render()
метод является обязательным и всегда будет вызываться, остальные являются необязательными и будут вызываться, если вы их определите.
constructor
Метод constructor()
вызывается прежде всего, когда компонент инициируется, и это естественное место для установки начальных state
и других начальных значений.
Метод constructor()
вызывается с
props
, в качестве аргументов, и вы всегда должны начинать с вызова , super(props)
прежде чем что-либо еще, это инициирует метод конструктора родителя и позволяет компоненту наследовать методы от своего родителя ( React.Component
).
Пример:
Метод constructor
вызывается React каждый раз, когда вы создаете компонент:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
жетдериведстатефромпропс
Метод getDerivedStateFromProps()
вызывается непосредственно перед рендерингом элемента(ов) в DOM.
Это естественное место для установки state
объекта на основе начального
props
.
It takes
state
as an argument, and returns an object with changes to the
state
.
The example below starts with the favorite color being
"red", but the
getDerivedStateFromProps()
method updates the favorite color based on the
favcol
attribute:
Example:
The getDerivedStateFromProps
method is called
right before the render method:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
render
The render()
method is required, and is the
method that actually outputs the HTML to the DOM.
Example:
A simple component with a simple render()
method:
class Header extends React.Component {
render() {
return (
<h1>This is the content of the Header component</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
componentDidMount
The componentDidMount()
method is called after the
component is rendered.
This is where you run statements that requires that the component is already placed in the DOM.
Example:
At first my favorite color is red, but give me a second, and it is yellow instead:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Updating
The next phase in the lifecycle is when a component is updated.
A component is updated whenever there is a change in the component's
state
or props
.
React has five built-in methods that gets called, in this order, when a component is updated:
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
The render()
method is required and will
always be called, the others are optional and will be called if you define them.
getDerivedStateFromProps
Also at updates the getDerivedStateFromProps
method is
called. This is the first method that is called when a component gets updated.
This is still the natural place to set the state
object based on the initial props.
The example below has a button that changes the favorite color to blue, but
since the getDerivedStateFromProps()
method is called,
which updates the state with the color from the favcol attribute, the favorite color is
still
rendered as yellow:
Example:
If the component gets updated, the getDerivedStateFromProps()
method is called:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
shouldComponentUpdate
In the shouldComponentUpdate()
method
you can return a Boolean value that specifies whether React should continue with the rendering or not.
The default value is true
.
The example below shows what happens when the
shouldComponentUpdate()
method returns false
:
Example:
Stop the component from rendering at any update:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Example:
Same example as above, but this time the shouldComponentUpdate()
method returns
true
instead:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return true;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
render
The render()
method is of course called when a component gets updated,
it has to re-render the HTML to the DOM, with the new changes.
The example below has a button that changes the favorite color to blue:
Example:
Click the button to make a change in the component's state:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
getSnapshotBeforeUpdate
In the getSnapshotBeforeUpdate()
method
you have access to the props
and
state
before the update, meaning that
even after the update, you can check what the values were before the
update.
If the getSnapshotBeforeUpdate()
method
is present, you should also include the
componentDidUpdate()
method, otherwise you will get an error.
The example below might seem complicated, but all it does is this:
When the component is mounting it is rendered with the favorite color "red".
When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".
This action triggers the update phase, and since this component has a
getSnapshotBeforeUpdate()
method, this method is executed, and writes a
message to the empty DIV1 element.
Then the componentDidUpdate()
method is
executed and writes a message in the empty DIV2 element:
Example:
Use the
getSnapshotBeforeUpdate()
method to find out
what the state
object looked like before
the update:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
componentDidUpdate
The componentDidUpdate
method
is called after the component is updated in the DOM.
The example below might seem complicated, but all it does is this:
When the component is mounting it is rendered with the favorite color "red".
When the component has been mounted, a timer changes the state, and the color becomes "yellow".
This action triggers the update phase, and since this component has
a componentDidUpdate
method, this method is
executed and writes a message in the empty DIV element:
Example:
The componentDidUpdate
method is called
after the update has been rendered in the DOM:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
componentWillUnmount
The componentWillUnmount
method is
called when the component is about to be removed from the DOM.
Example:
Click the button to delete the header:
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root'));