Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2018, 13:07
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

React Router - re-render компонента при смене url
Добрый день,

Делаю тренировочный проект на React с использованием библиотек React Redux и React Router DOM.

Код для примера такой:

<Switch>
  <Route exact path='/' component={ MovieList }/>
  <Route path='/genre/:genre' component={ MovieList }/>
  <Route path='/login' component={ AuthForm }/>
</Switch>

<Nav>
  // При переходе с URL '/genre/:genre' на '/' re-render не происходит потому что компонент не меняется  у обоих Route - <MovieList />
  <Link to="/"> Список фильмов </Link>
  // При нажатии на ссылку re-render происходит потому что меняется  store при onClick
  <Link to="/genre/:genre" onClick={ this.props.movieGenre.bind(this) }> Список фильмов по жанру </Link>
  // При нажатии на ссылку re-render происходит потому что в "Route" меняется компонент с <MovieList /> на <AuthForm /> 
  <Link to="/login"> Авторизация </Link>
</Nav>


Подскажите пожалуйста может ли React Router делать ререндер одного и того же компонента при смене url?

Пример http://kino.ua-ix.biz/genre/Фентези если нажать на вкладку Список фильмов - компонент <MovieList /> не обновится - останутся фильмы "Фентези"
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2018, 15:35
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Это можно сделать миллион и одним способом, вопрос в том, зачем надо делать ререндер компонента. Один из способов проверять в shouldComponentUpdate текущие пропсы из роутера и те, которые приходят
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2018, 17:11
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Сообщение от Царь Леонид Посмотреть сообщение
Это можно сделать миллион и одним способом, вопрос в том, зачем надо делать ререндер компонента. Один из способов проверять в shouldComponentUpdate текущие пропсы из роутера и те, которые приходят
Спасибо! Так работает - просто если бы такое умел делать роутер - как с компонентом <AuthForm /> - было бы меньше кода.

shouldComponentUpdate(nextProps){
		if(nextProps.location.pathname != this.props.location.pathname && nextProps.location.pathname == '/'){
			this.props.movieList(0);
			return nextProps;
		} else {
			return nextProps;
		}
	}
Ответить с цитированием
  #4 (permalink)  
Старый 21.09.2018, 18:48
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

У тебя в коде всегда будет происходить перерендер, это неправильное поведение. shouldComponentUpdate должен возвращать или true или false, он у тебя все время объект возвращает, а объект == true.
Ответить с цитированием
  #5 (permalink)  
Старый 22.09.2018, 23:41
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Сообщение от Царь Леонид Посмотреть сообщение
У тебя в коде всегда будет происходить перерендер, это неправильное поведение. shouldComponentUpdate должен возвращать или true или false, он у тебя все время объект возвращает, а объект == true.
Мне перерендер этого компонента нужен всегда - т.к. при смене url должны подтянутся фильмы из БД которые соответствуют этому url.
Или тут что то не так?
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2018, 10:55
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Вообще-то да, не так. Это должно работать следующим образом - пришли новые данные -> обновили данные в хранилище (redux, mobx или даже просто в стейте компонента) -> произошел ререндер. Излишний перерендер - это явление с которым все борются, а у вас в коде это паттерн.
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2018, 18:15
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Сообщение от Царь Леонид Посмотреть сообщение
Вообще-то да, не так. Это должно работать следующим образом - пришли новые данные -> обновили данные в хранилище (redux, mobx или даже просто в стейте компонента) -> произошел ререндер. Излишний перерендер - это явление с которым все борются, а у вас в коде это паттерн.
Действительно с кодом у меня что то не так, я сделал console.log() в функции render() - она запускается несколько раз даже без shouldComponentUpdate(nextProps). Буду разбираться почему так происходит...
Ответить с цитированием
  #8 (permalink)  
Старый 24.09.2018, 18:32
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Если есть желание и возможность, сделай фиддл https://codesandbox.io/s/new я гляну
Ответить с цитированием
  #9 (permalink)  
Старый 24.09.2018, 20:52
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Сообщение от Царь Леонид Посмотреть сообщение
Если есть желание и возможность, сделай фиддл https://codesandbox.io/s/new я гляну
Буду рад если подскажите в каком направлении двигаться: https://codesandbox.io/s/lxlwv7x47l компонент со списком фильмов <MovieList>, роутинг в <Main>
Ответить с цитированием
  #10 (permalink)  
Старый 29.09.2018, 23:58
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Понял один нюанс shouldComponentUpdate - отключает обновление компонента если возвращает false.
Мне нужно было сделать так чтобы компонент обновлялся когда пользователь переходит на главную, но при этом так же нужно чтобы компонент обновлялся когда меняется его store, а если выдавать false этого не произойдёт. Поэтому я и делал 2 раза true.

как мне кажется лучше использовать componentWillReceiveProps, в моём случае.

а то что рендер вызывается несколько раз, связано с тем что я отправляю лишние action в Redux.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оставить выделение при смене фокуса DZHETIGAPA Events/DOM/Window 5 01.02.2018 19:11
изменение значения input при смене значения select galart jQuery 4 30.01.2015 18:39
Событие при смене слайда в AnythingSlider Gurylyov jQuery 4 01.12.2011 15:48
вызов функции при смене url vvsh Events/DOM/Window 4 11.08.2011 18:01
Прерывается выполнение функции при смене аргумента mikser763 Общие вопросы Javascript 1 11.10.2010 15:36