ReactJS - Strict Mode: A Beginner's Guide

Привет, будущие разработчики React! Сегодня мы погрузимся в важную, но часто игнорируемую функцию React: Strict Mode. Не волнуйтесь, если вы новички в программировании - я passo шаг за шагом, как я делал это для countless студентов за годы преподавания. Так что возьмите кружку кофе (или чая, если это ваше дело), и отправляйтесь в это обучение приключение вместе!

Что такое Strict Mode?

Before мы углубимся в детали, давайте поймем, что такое Strict Mode в React. Представьте, что вы учитесь водить машину. Strict Mode как очень тщательный инструктор по вождению, сидящий рядом с вами, указывающий на каждую вашу маленькую ошибку. Он не ругает вас, а помогает стать лучше водителем - или в нашем случае,更好的 React разработчиком.

Strict Mode - это инструмент для выделения потенциальных проблем в вашем приложении. Он активирует дополнительные проверки и предупреждения для своих потомков. Давайте посмотрим, как его использовать:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

В этом примере мы оборачиваем весь компонент App в React.StrictMode. Это означает, что все компоненты внутри App будут подвержены этим дополнительным проверкам.

Теперь давайте разберемся, что именно проверяет Strict Mode.

Небезопасное использование жизненных циклов

Что такое жизненные циклы?

Before мы поговорим о небезопасных жизненных циклах, давайте поймем, что такое жизненные циклы. В React компоненты проходят через серию стадий от рождения (монтаж) до смерти (размонтаж). Эти стадии называются жизненными циклами.

Небезопасные жизненные циклы

Some жизненные циклы считаются небезопасными, так как они могут привести к багам в асинхронной рендеринге. Strict Mode помогает выявить их использование. Вот пример:

class OldComponent extends React.Component {
componentWillMount() {
console.log("Этот метод небезопасен!");
}

render() {
return <div>Здравствуйте, я старый компонент!</div>;
}
}

Если вы используете этот компонент в Strict Mode, вы увидите предупреждение в консоли о 사용е небезопасного метода componentWillMount.

Instead, вы должны использовать более безопасные альтернативы. Вот таблица небезопасных методов и их безопасных альтернатив:

Небезопасный метод	Безопасная альтернатива
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Использование устаревшего API ref

Что такое ref?

Ref предоставляют способ доступа к DOM-нодам или React элементам, созданным в методе рендеринга. Они как прямая линия к определенной части вашего UI.

Строковые ref (устаревшие)

Раньше ref создавались с помощью строк, вот так:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Нажмите меня!</button>;
}
}

Этот метод считается устаревшим и может вызывать проблемы. Strict Mode предупредит вас, если вы используете строковые ref.

Современное использование ref

Instead, вы должны использовать createRef API или钩 useRef:

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Нажмите меня!</button>;
}
}

В этом примере мы используем React.createRef() для создания ref, что безопаснее и эффективнее.

Устаревшее использование findDOMNode

Что такое findDOMNode?

findDOMNode был методом, используемым для поиска в DOM дереве определенного экземпляра React компонента. Однако он теперь deprecated из-за потенциальных проблем, которые может вызвать.

Пример использования findDOMNode

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>Я буду красным!</div>;
}
}

Этот код изменит цвет фона div на красный. Однако использование findDOMNode так не рекомендуется, и Strict Mode предупредит вас об этом.

Современная альтернатива

Instead of findDOMNode, вы должны использовать ref:

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>Я буду синим!</div>;
}
}

Это достигает того же результата, но более безопасным и React-friendly способом.

Заключение

И вот мы добрались до конца, друзья! Мы отправились в путешествие по миру React's Strict Mode, исследуя его предупреждения о небезопасных жизненных циклах, устаревшем использовании ref и deprecated методе findDOMNode. Помните, что Strict Mode - это ваш друг-разработчик React, всегда готовый помочь вам написать лучший, более безопасный код.

Как мы заканчиваем, я вспоминаю студента, который однажды сказал мне: "React как строгий, но заботливый родитель - он устанавливает правила, чтобы мы были в безопасности, но также дает нам свободу создавать потрясающие вещи." Согласен на все 100%!

Продолжайте практиковаться, продолжайте учиться и, самое главное, продолжайте программировать. До свидания, счастливого React-инга!

Credits: Image by storyset