a
Size: a a a
2020 August 22
a
Что за запуски?)
И
Есть n компонентов у которых:
const Column = ({id}) => {
`const Column = ({id}) => {
a
Есть n компонентов у которых:
const Column = ({id}) => {
`const Column = ({id}) => {
так?)
И
щас пишу чтобы максимально понятно
a
Каждый такой компонент должен ререндерится только при изменении его данных
a
щас пишу чтобы максимально понятно
гуд
И
Просто или я переработал) или найдется ответ )
И
гуд
Есть n компонентов у которых:
`
const Column = ({id}) => {
const element = useAtom(
itemsState,
(items) => items[id] || {}
[id],
);
console.log({ id })
return <>
{element.html}
</>
}
itemsState = {
1: {
id: 1,
html: '1'
},
2: {
id: 2,
html: '2'
}
}
`
Кажется что запускаются все компоненты у которых useAtom(itemsState) - itemsState в целом изменен и запускается тело селектора
Что в моих ожиданиях не так?
`
const Column = ({id}) => {
const element = useAtom(
itemsState,
(items) => items[id] || {}
[id],
);
console.log({ id })
return <>
{element.html}
</>
}
itemsState имеет структуру:
itemsState = {
1: {
id: 1,
html: '1'
},
2: {
id: 2,
html: '2'
}
}
`
Кажется что запускаются все компоненты у которых useAtom(itemsState) - itemsState в целом изменен и запускается тело селектора
Что в моих ожиданиях не так?
И
id в компоненте не меняется же - сам его объект тоже - ожидаю что он не будет каждый раз запускаться
a
А как этот список рендерится?
a
Скорее всего ререндеры не от useAtom, а от родительского маппинга списка
a
Сомпоненты рендерятся по
Object.keys(itemsState)map(…. или от вообще отдельного атома?И
const columns = useAtom(
itemsState,
(items) => {
return items[id] ? items[id].columns || [generateUid()] : null;
},
[id],
);
return columns ? (
<Row>
<RowColumnsCmp>
{columns.map((column) => (
<RowColumnCmp key={column} rowId={id} columnId={column} />
))}
</RowColumnsCmp>
{/* {item.id} */}
<RowBorderCmp id={id} />
<RowSideButtonsCmp id={id} dragHandleProps={dragHandleProps} />
</Row>
) : null;
И
там сложно еще я в целом стараюсь сделать вложенность и каждый раз минимум привязываться - чтобы кратно не рос рендер
И
@artalar добавил лог в родительский
И
запустилось сколько - а родительский 0 раз
a
RowInerComponent откуда id берет?
