Тайна React Element и повторные рендеры
Например, у вас есть родительский компонент, в котором часто изменяется стейт. В нем рендерится дочерний компонент:
const MovingComponent = () => {
const [state, setState] = useState({ x: 100, y: 100 });
return (
<div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
<ChildComponent />
</div>
);
};
Изменение стейта в родительском компоненте будет приводить к рендеру дочернего компонента, что может быть плохо для производительности. Чтобы предотвратить повторный рендер дочернего компонента, помимо React.memo можно использовать паттерн children, когда ChildComponent выносится наружу и передается как проп children:
const MovingComponent = ({ children }) => {
const [state, setState] = useState({ x: 100, y: 100 });
return (
<div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
{children}
</div>
);
};
const SomeOutsideComponent = () => {
return (
<MovingComponent>
<ChildComponent />
</MovingComponent>
);
};
Надя Макаревич в своем блоге разобралась, почему React не рендерит компонент повторно в таком случае, а почему в других случаях происходит рендер.
В случае передачи компонента как проп children, компонент создается один раз в SomeOutsideComponent. При рендере компонента MovingComponent, при изменении стейта его пропсы остаются такими же, поэтому не происходит повторный рендер компонента ChildComponent.
www.developerway.com/posts/r…-parents
