Почему вы никогда не должны обновлять состояние непосредственно в React 🚫

Почему вы никогда не должны обновлять состояние непосредственно в React 🚫

React — популярная библиотека для создания пользовательских интерфейсов с помощью JavaScript. React использует состояние для управления данными и поведением компонентов. Состояние — это простой объект JavaScript, который содержит информацию, влияющую на результат рендеринга.

Но как обновить состояние в React? Вы можете подумать, что можете просто присвоить новое значение свойству состояния вашего компонента, например:

this.state.count = this.state.count + 1;

Однако это плохая практика, которая может привести к множеству проблем в вашем приложении. В этой статье я объясню, почему никогда не следует обновлять состояние непосредственно в React и что следует делать вместо этого. 🙌

Проблема с прямым обновлением состояния 🤔

Обновление состояния непосредственно в React — это путь к катастрофе по двум основным причинам:

React не знает, что состояние изменилось. React перерисовывает компоненты только при изменении их состояния или свойств. Когда вы обновляете состояние напрямую, React не может узнать, что состояние изменилось, и компонент не будет повторно отображаться. Это может привести к устаревшему или неправильному пользовательскому интерфейсу и затруднить отладку проблем в вашем приложении1.

Вы можете изменить предыдущее состояние. Обновления состояния в React асинхронны; при запросе обновления нет гарантии, что обновления будут выполнены немедленно. React может объединять несколько обновлений вместе из соображений производительности. Это означает, что если вы обновляете состояние на основе предыдущего состояния, возможно, вы используете устаревшее или неверное значение2. Например, рассмотрим этот код:

this.setState({
. count: this.state.count + 1
});
this.setState({
.count: this.state.count + 1
});

Вы могли бы ожидать, что этот код увеличит счетчик на два, но это может не так. React может сгруппировать два обновления вместе и использовать одно и то же значение this.state.count для них обоих, что приведет только к одному приращению.

Решение: используйте setState() или useState() 🙌

Чтобы избежать этих проблем, вы никогда не должны обновлять состояние непосредственно в React. Вместо этого вы должны использовать один из этих двух методов:

установить состояние(). Это метод, принадлежащий компонентам класса. Он принимает объект или функцию в качестве аргумента и объединяет их с текущим состоянием. Он также сообщает React, что состояние изменилось, и запускает повторный рендеринг компонента и его дочерних элементов3. Например:

this.setState({
.count: this.state.count + 1
});

использовать состояние(). Это хук, принадлежащий функциональным компонентам. Он возвращает пару значений: текущее состояние и функцию для его обновления. Функция также принимает объект или функцию в качестве аргумента и заменяет им текущее состояние. Он также сообщает React, что состояние изменилось, и запускает повторный рендеринг компонента и его дочерних элементов4. Например:

const [count, setCount] = useState(0);

setCount(count + 1);

При использовании этих методов следует следовать следующим рекомендациям:

Не изменяйте объект состояния. Всегда создавайте новый объект или массив при обновлении состояния вместо изменения существующего. Это помогает React сравнивать старое и новое состояния и оптимизировать процесс повторного рендеринга2. Например, если ваше состояние представляет собой массив элементов, вы можете использовать такие методы, как concat, slice, filter или map, чтобы создать новый массив, не изменяя исходный.

Используйте функцию при обновлении состояния на основе предыдущего состояния. Если ваше новое состояние зависит от предыдущего состояния, вы должны использовать функцию в качестве аргумента для setState() или setCount(). Эта функция получит предыдущее состояние в качестве параметра и вернет новое состояние. Это гарантирует, что вы всегда используете самое последнее и точное значение состояния2. Например:

this.setState(prevState => ({
.count: prevState.count + 1
}));
setCount(prevCount => prevCount + 1);

Вывод 🎉

В этой статье я объяснил, почему никогда не следует обновлять состояние непосредственно в React и что следует делать вместо этого. Непосредственное обновление состояния может привести к тому, что React пропустит изменение состояния и не перерисует компонент или будет использовать устаревшее или неправильное значение состояния. Чтобы избежать этих проблем, вы должны использовать методы setState() или useState() и следовать рекомендациям по созданию нового объекта или массива при обновлении состояния и использованию функции при обновлении состояния на основе предыдущего состояния.

Надеюсь, вы узнали что-то полезное из этой статьи. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, дайте мне знать в комментариях. Удачного кодирования! 😊