Чтобы сделать константу, содержащую объект, настоящей константой слудует использовать Object.freeze()
So above there is an example of a very simple Welcome Pure Component and Hello Stateless Component. When you use these two in your Parent Component, you will see Hello will re-render whenever Parent Component will re-render but Welcome Component will not.
This is because PureComponent changes the life-cycle method shouldComponentUpdate and adds some logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call the method render only if it detects changes in state or props.
class Welcome extends React.PureComponent {
render() {
return <h1>Welcome</h1>
}
}
Hello = () => {
return <h1>Hello</h1>;
}STATELESS COMPONENT declared as a function that has no state and returns the same markup given the same props.
Text
Компонент высшего порядка — это функция, которая принимает входной компонент и возвращает расширенную или изменённую версию этого компонента.
An input form element whose value is controlled by React in this way is called a “controlled component”.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Теперь, когда мы знаем о состоянии компонента и как при изменении этого состояния происходит какая-то магия, давайте изучим последние несколько концепций.
- Компоненту может понадобится повторная отрисовка, когда его состояние будет обновлено или когда его родитель решает изменить props, которые он передал компоненту.
- Если происходит последнее, React вызывает другой метод жизненного цикла, componentWillReceiveProps.
- Если объект состояния или переданные props изменены, React должен принять важное решение. Должен ли компонент обновляться в DOM? Вот почему он вызывает другой важный метод жизненного цикла, shouldComponentUpdate. Этот метод по сути является вопросом, поэтому, если вам нужно самостоятельно настроить либо оптимизировать процесс отрисовки, вы должны ответить на этот вопрос, вернув либо true, либо false.
- Если метод shouldComponentUpdate не объявлен, React по умолчанию делает очень умную вещь, которая, на самом деле, достаточно хороша в большинстве ситуаций.
- Во-первых, React вызывает другой метод жизненного цикла, componentWillUpdate. Затем React рассчитает новое отображение компонента и сравнивает его с последним.
- Если результат точно такой же, React ничего не делает (нет необходимости разговаривать с браузером).
- Если есть разница, React переносит эту разницу в браузер, как мы видели раньше.
- В любом случае, поскольку процесс обновления произошел (даже если результат рендеринга был точно таким же), React вызывает последний метод жизненного цикла, componentDidUpdate.
Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого применять изменения к реальному DOM.
При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено.
React
By Anastasia Shemetillo
React
- 87
