Как не перерисовывать родителя дочернего компонента?
У меня проблемы с повторным рендерингом, любая помощь очень ценится. Я попробовал использовать useMemo и useCallback, и это сломало флажок. У меня есть компонент, и внутри этого компонента я отображаю некоторую информацию в своем объекте. У меня есть, скажем, объект как таковой:
fakeObject = {
name: "rectangle"
width: 10
height: 20
visible: true
}
const fakeComponent = () => {
const [checked, setChecked] = React.useState(true);
const handleChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
fakeObject["visible"] = event.target.checked;
};
return(
<div>
<h2> {fakeObject.name} </h2>
<p> The height is {fakeObject.height} </p>
<Checkbox
checked = {checked}
onChange = {handleChangeEvent}
inputProps = {{ 'aria-label': 'controlled' }}
/>
</div>
)
};
Проблема в том, что каждый раз, когда я нажимаю на свой флажок, он перерисовывает весь компонент. Это упрощенная версия моей проблемы, но я вижу, что компонент использует мой fakeObject и что флажок меняет это, но как мне сделать так, чтобы весь мой компонент не отображался повторно? Спасибо за любую помощь
вы не можете, потому что checked является состоянием fakeComponent и поэтому вызывает повторный рендеринг
похоже на дубликат stackoverflow.com/questions/54015086/…
@ymz у меня немного наоборот? например, не перерисовывать родителя, а не перерисовывать дочерний элемент
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Родительский компонент будет повторно визуализирован, потому что вы сохраняете проверенное состояние родительского компонента с помощью useStateHook, если вы хотите избежать повторного рендеринга компонента, вы можете использовать memo, но вам нужно удалить хук там, где вы хотите избегать повторного рендера.
Как не перерисовывать родителя дочернего компонента?
Это возможно, но вам придется перенести всю логику, отвечающую за установку флажка, в дочерний компонент (Child).
const Checkbox = () => {
const [checked, setChecked] = useState(false);
console.info('child re-render');
return (
<input
value = {checked}
type = "checkbox"
onChange = {() => setChecked((prev) => !prev)}
/>
);
};
Тогда вам даже не нужно беспокоиться о memo.
Codesandbox: https://codesandbox.io/s/modest-star-y0z3xt?file=/src/App.js
Спасибо, это помогло в каком-то сценарии
Каждый раз, когда ваше состояние изменяется, компонент перерисовывается, и все компоненты, использующие это состояние, также перерисовываются. Вот что делает реакция.