junior course react #26
Conversation
schurin
commented
Aug 10, 2020
schurin
commented
- Добавлен списко товаров
- Фильтрация
- Redux не подключал для шаринга фильтров использовал Context
src/PriceFilter/index.jsx
Outdated
| width: '6em' | ||
| } | ||
|
|
||
| class PriceFilter extends BaseComponent { |
There was a problem hiding this comment.
Думаю уже нет смысла наследоваться от BaseComponent, эта часть была для понимания как sCU реализуется. Наследуйся от React.Component
There was a problem hiding this comment.
Мне самому инетресно пока, когда был рерндер
Давай оставим :)
src/PriceFilter/index.jsx
Outdated
| class PriceFilter extends BaseComponent { | ||
|
|
||
| handleControlChange(filterName, value) { | ||
| setTimeout(() => this.props.onChangeFilter({ |
There was a problem hiding this comment.
Вся асинхронщина должнв быть в componentDidMount
There was a problem hiding this comment.
Это задержка пользовательского ввода
Чтобы фильтрация не происходила мгновенно после ввода каждого символа
src/PriceFilter/index.jsx
Outdated
| <input style={ inuputStyle } | ||
| type="text" | ||
| defaultValue={ minPrice || 0 } | ||
| onChange={(event)=> this.handleControlChange('minPrice', parseInt(event.target.value, 10))}/> |
There was a problem hiding this comment.
В целом в этом случае стрелки ок. Но это часто приводит в проблемам "лишних" рендеров тк функция анонимная каждый раз.
Нужно это иметь ввиду.
https://ru.reactjs.org/docs/faq-functions.html#arrow-function-in-render тут подробнее
There was a problem hiding this comment.
обратил внимание, для реакта это повод перерисовать компонент, ввиду того, что ссылка изменилась
в конкретной ситуации передаём minPrice как аргумент
src/UserFilters/index.jsx
Outdated
| handleFilterChange(changes) { | ||
| const { filterName, value } = changes; | ||
|
|
||
| setTimeout(() => this.props.onChangeFilter({ |
There was a problem hiding this comment.
Вообще не очень понятно зачем тут таймаут
There was a problem hiding this comment.
нужна задержка по вводу пользователя
правда ей тут немного не метсто
|
|
||
| import { logger } from 'csssr-school-utils'; | ||
|
|
||
| class BaseComponent extends React.Component { |
There was a problem hiding this comment.
Больше нет смысла самому писать BaseCompoment, можно сразу во всех случаях наследоваться от React.Component и юзать нативный sCU
| <div className={s.goodsName}>{title}</div> | ||
| <div> | ||
| { | ||
| range(maxRating).map(i => React.createElement(ratingComponent, { key: i, isFilled: i <= rating })) |
There was a problem hiding this comment.
React.createElenent тут лишний, можно же просто передать <ratingComponent {...props}>
