Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Как пропнуть ререндер компонента в реакте

Реакт сам решает когда рендерить компоненты. Это все хорошо, пока не появляется компонент, который по тем или иным причинам зависит от неких внешних данных и реакт не в курсе, что эти данные изменились.

Например, это может быть таблица, колонки которой задаются массивом объектов:

Каждый из объектов массива задает название колонки и то как будет выводится контент. Если контент будет выводится при помощи более сложной функции, которая по замыканию использует сторонние данные, то вот тут будет проблема. Ваша таблица не будет отрендерина, если данные по замыканию изменятся. Это связанно с тем, что реакт не отслеживает все изменения на свете, а только те, что в стейте (стейт компонента, либо сейт приложения).

В описанном случае, есть два варианта решения. Первое (и скорее всего самое правильное), это подумать над исполнением. Очень может быть что вы просто не так уж хорошо написали код и вполне возможно, что стоит снова подумать над архитектурой. Второй вариант – это использовать атрибут “key” реакта.

Наверняка, вы все уже не раз добавляли этот атрибут элементам массива при рендере. А не думали зачем это надо? Дело в том, что реакту нужен этот атрибут для двух целей:

Стоит обратить внимание на то, что нигде в документации не написано, что “key” должен использоваться обязательно в массиве. Вы можете добавить его любому элеменут и в тот момент, как он изменится, реакт заново отрендерит компонент.

Поделиться:
comments powered by Disqus