React: 6 подсказок для начинающих
Я начал использовать React весной 2017 года и за полгода изучил много интересных вещей и наделал много ошибок. В этой статье я расскажу начинающим изучение React, как избежать некоторых ошибок.
1 setState вызывает перерисовку
По умолчанию React заново отрисовывает компонент после каждого изменения состояния (state), и обычно с этим не возникает никаких сложностей. Но иногда это приводит к холостым перерисовкам, что не очень хорошо сказывается на производительности.
У каждого компонента есть метод shouldComponentUpdate и он вызывается каждый раз, когда меняется состояние или передаются новые параметры (props) из родительского компонента. Отрисовывать заново компонент или нет — за это отвечает этот метод.
По умолчанию этот метод возвращает true, но если переопределить этот метод в компоненте, то можно возвращать false в тех случаях, когда не требуется перерисовка.
shouldComponentUpdate(nextProps, nextState)
- Если неправильно определять, что должен возвращать этот метод, то компонент будет отрисовываться не так, как ожидается.
- Запуск вычислений в методе shouldComponentUpdate может привести к проблемам производительности.
2 setState обновляет состояние асинхронно
Изменение состояния не происходит моментально. Самая распространённая ошибка: чтение состояния сразу после вызова setState.
Если нужно обновить состояние, основываясь на предыдущем состоянии, то лучше всего использовать функцию updater в качестве первого аргумента функции setState(updater, [callback]).
Пример использования updater:
this.setState((prevState) => < return ; >);Также у setState может быть второй аргумент — callback. Это функция, которая вызывается сразу после изменения состояния и перерисовки компонента. Но, согласно официальной документации, для этого рекомендуется использовать метод componentDidUpdate.
3 Жизненный цикл компонента
Очень важно понять и простить жизненный цикл компонента.
Его можно условно разделить на 3 части:
Монтирование: объект компонента создаётся и вставляется в DOM.
Обновление: перерисовка компонента из-за изменения состояния или параметров.
Отмонтирование: удаление компонента из DOM.
4 Используйте componentWillReceiveProps
Если нужно изменять состояние при изменении параметров, используйте метод componentWillReceiveProps. В этом методе следует сравнивать текущее и следующее значение параметров, и если есть существенные изменения, то обрабатывать их.
- Иногда React может вызвать componentWillReceiveProps, даже если параметры не изменились, поэтому в целях оптимизации производительности стоит сравнивать текущие параметры и следующие.
- React не вызывает componentWillReceiveProps во время монтирования компонента.
5 Используйте React Developer Tools
React Developer Tools позволяет инспектировать компоненты, их параметры и состояние. Это дополнение очень похоже на стандартный инспектор DOM, встроенный в Chrome Dev Tools.
React Developer Tools распространяется как расширения для браузера (для Chrome и Firefox), а также как самостоятельное приложение.
6 Используйте Create React App
Create React App от Facebook позволяет создавать приложения без настройки сборки. Этот инструмент прост в использовании и имеет хорошую инструкцию на Github. Для использования необходимо иметь Node версии 6 и выше.
Обновление компонента React
Компоненты перерисовываются при изменении внеших props и собственного state. Чтобы обновить state в соответствии с props, я использую getDerivedStateFromProps. Интересный момент в том, что он вызывается и при setState на компоненте. Этот вопрос был на гитхабе в виде issue и мистер Абрамов ответил что возвращайте из этой функции null, если не хотите чтобы переписался state. В итоге какая то боль — при каждом вызове это статического метода, мне нужно проверять, изменится ли состояние компонента от пропсов ? обновить стэйт : null. Учитывая то, что сложные объекты в жабаскрипт равны, если равны адреса в памяти, на которые они указывают, то эта проверка уже сейчас меня выбешивает. В общем, верю в то что я где то ошибаюсь
Отслеживать
задан 2 мар 2019 в 10:39
1,159 10 10 серебряных знаков 22 22 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если в render() будете использовать this.props.someVariable то компонент перерисуется при приходе нового значения в this.props.someVariable без дополнительных телодвижений.
Перерисуется при изменении title :
class ComponentOne extends React.Component < render() < return ; > > Если надо производить вычисления с новыми props, то можете вынести их в отдельную функцию. Пример ниже тоже перерисует компонент при изменении titles :
Может нет смысла перегонять кучу props в state?
react как обновить компонент
В React компоненты обновляются автоматически, когда изменяются их свойства или состояние.
Если вы хотите явно обновить компонент, вы можете вызвать метод forceUpdate() у экземпляра компонента. Однако, это не рекомендуется, так как это может привести к неэффективному использованию ресурсов и проблемам с производительностью.
Вместо этого, рекомендуется изменять свойства или состояние компонента, чтобы React самостоятельно обновил его. Если вам нужно обновить компонент на основе внешних данных, вы можете использовать props или state для передачи этих данных в компонент и вызвать обновление компонента, когда данные изменятся.
Как заставить React перерисовать компонент?
Вопрос может показаться странным, но как принудительно заставить React перерисовать компонент в дом дереве браузера?
Дело в том, что forceUpdate и setState не дают результата, рендеринг запускается, но, похоже что дальше виртуального дерева обновление не проходит, в случае если пропсы и стейт не влияют на результат рендеринга.
Если способ обновить компонент именно в браузере?
- Вопрос задан более трёх лет назад
- 6229 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Знаю больше чем это необходимо
если пропсы и стейт не влияют на результат рендеринга.
То реакт ничего делать и не должен и «заставлять» его не нужно
Получите прямую ссылку на DOM ноду, которую вы хотите «перерисовать» и «перерисуйте». Хотя что такое перерисовать при условии что DOM не поменялся?
Если вы хотите просто выкинуть все и создать заново — то поставьте какому-нибудь блоку key и поменяйте его на любое другое рандомное значение. Дерево пересоздастся.
Ответ написан более трёх лет назад
Нравится 3 3 комментария
maksipes @maksipes Автор вопроса
Кей надо прокидывать сверху. А это надо изнутри компонента сделать, без размонтирования. Предположительно в дидМоунт вызвать ререндер.
Есть глюк с левым компонентом, рисующим в канвас. И этот глюк пропадает только после ресайза этого компонента. Нужно или изменить размер окна мышкой, или сделать ререндер с измененным размером.
Например из дидМаунта ререндерим меняем размер дива — и все работает, но успевает проскочить на экране изменение размера, даже если оно крошечное — шевеленка.
В общем надо как-то принудительно заставить его обновиться с тем же размером, чтобы было незаметно.
maksipes, ну так это вопрос не про реакт а про то что делать с этим глючным компонентом.
или читайте его доку, как заставить его принудительно перерисовать канвас, если она есть, или копайте в исходники и думайте, если нет.
вам надо не компонент обновлять а канвас перерисовать.