Как немедленно обновить компоненты на основе взаимодействия пользователя с React/Redux
У вас есть компоненты React. Вы поняли, как использовать Redux для подачи им данных. Вы создаете компонент, который создает/обновляет/удаляет элемент в вашем API, и помещаете его на страницу, отображающую элементы из вашего API. Как заставить всю страницу перезагружаться, чтобы показывать обновленные данные каждый раз, когда пользователь вносит изменения? Состояние Redux и массив зависимостей useEffect() .
Можно использовать только React для передачи данных из нашего счетчика в родительский элемент, чтобы получить почти такой же эффект счетчика в моем примере, но использование состояния Redux и массива зависимостей React useEffect() в некоторых отношениях проще, и применимы ко многим другим ситуациям.
В этой статье предполагается базовое знакомство с API, React, Redux и Node. Я начал это приложение с приложения create-реагировать и использую функциональные компоненты и хуки. Вы можете найти весь код в этом репозитории. Я работаю с React (v17.0.1), Redux (v4.0.5), [react-redux] (https://www.npmjs.com/package/react-redux) (v7.2.2) и [redux -thunk] (https://www.npmjs.com/package/redux-thunk) (v2.3.0). В этом примере я использовал [Dog API] (https://dog.ceo/dog-api/documentation/breed), чтобы отображать случайные изображения сиба-ину.
После тестирования конечных точек API (в данном случае в браузере с JSONView) я начал с настройки типов действий и создатели действий для запроса GET API Dog. Я могу создавать асинхронные действия благодаря redux-thunk. Для этого небольшого примера я оставил свои запросы на выборку внутри создателей действий.
Ниже приведены результаты создателя действия с действием загрузки, которое будет важно позже.
react как обновить компонент
В React компоненты обновляются автоматически, когда изменяются их свойства или состояние.
Если вы хотите явно обновить компонент, вы можете вызвать метод forceUpdate() у экземпляра компонента. Однако, это не рекомендуется, так как это может привести к неэффективному использованию ресурсов и проблемам с производительностью.
Вместо этого, рекомендуется изменять свойства или состояние компонента, чтобы React самостоятельно обновил его. Если вам нужно обновить компонент на основе внешних данных, вы можете использовать props или state для передачи этих данных в компонент и вызвать обновление компонента, когда данные изменятся.
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 перерендерить компонент?
Вроде вопрос простой но не знаю как сделать лучше
Есть компонент, в нем все отлично, все обновляется кроме одной переменной, но она и самая важная.
Сам проект храниться здесь репозиторий
готовый билд посмотреть
- Вопрос задан более двух лет назад
- 2081 просмотр
4 комментария
Простой 4 комментария
let newMassive = caseMassive;
let finishList = newMassive.map((element) => < return element= />; >);Зачем ты сохраняешь массив домов в переменную?
G F @fomenkogregory
2. чтобы не гадить в хтмле.
Такой хтмл, как бы не загадить.)
G F @fomenkogregory
WbICHA, ну в данном случае это и правда лишнее, никто до туда все равно не дочитает, глаза с нейнимнга раньше вытекут.
Решения вопроса 1
vadimparinov @vadimparinov
Используй state для хранения массива и тогда будет обновляться.
Ответ написан более двух лет назад
DMITRY Chernenkiy @Nikonorovich Автор вопроса
использовал useState для хранения caseMassive, не совсем помогло. Подскажите пожалуйста чуть подробнее
vadimparinov @vadimparinov
Покажи лучше код. Чтобы убедиться что правильно используешь
DMITRY Chernenkiy @Nikonorovich Автор вопроса
vadimparinov, Забрасываю непосредственно генерацию дом элементов в useState
function CreateList(< filterList, caseMassive >) < let [listDOMElements, setlistDOMElements] = useState( caseMassive.map((element) => < return element= />; >) );vadimparinov @vadimparinov
DMITRY Chernenkiy, в state нужно хранить только сами элементы.
DMITRY Chernenkiy @Nikonorovich Автор вопроса
попробовал вот так все равно без результата
let domLIst = caseMassive.map((element) => < return element= />; >); let [newList, setnewList] = useState(domLIst);vadimparinov @vadimparinov
const [newList, setnewList] = useState(domLIst); newList.map((element) => < return element= />; );Ответы на вопрос 1
G F @fomenkogregory
Юниор софтварный инженер
использовать immutable data structures. чтобы компонент запустил процесс ререндера ссылка на объект (caseMassive) должна поменяться
https://stackoverflow.com/questions/36084515/how-d.
Ответ написан более двух лет назад
DMITRY Chernenkiy @Nikonorovich Автор вопроса
Не совсем понятно, immutable data structures в JS это ведь цифры и строки, как и зачем их тут использовать ?
DMITRY Chernenkiy @Nikonorovich Автор вопроса
Или вы имеете ввиду библиотеку immutable.js ?
G F @fomenkogregory
DMITRY Chernenkiy, массив можно изменить мутировав его, например так
`arr[0].important = false` или так `arr.splice(1, 1)` или некоторыми другими методами. в этом случае у нас компонент не перерендерится потому что в пропсе будет та же самая ССЫЛКА на объект.
необходимо изменить ссылку т. е. передать новый объект.
G F @fomenkogregory
DMITRY Chernenkiy @Nikonorovich Автор вопроса
G F, попробовал создать новый массив при помощи деструктуризации(насколько я знаю деструктуризация всегда возвращает новый массив)
но чет как-то не сработало
Может быть я не совсем понял суть и принцип применения ? или где-то совершил ошибку?
DMITRY Chernenkiy @Nikonorovich Автор вопроса
G F, или новыми объектами должны быть конкретно вот эти element= />
лист айтемы ?
DMITRY Chernenkiy @Nikonorovich Автор вопроса
G F, Попробовал еще вот так
Но что-то все равно не хочет перерендерить
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- React
Как правильно отрисовать классовую компоненту?
- 1 подписчик
- 13 часов назад
- 35 просмотров