Как дать реагировать только на визуализацию части компонента?

Question

Я пишу приложение реагирования с сетками CSS. Я не собираюсь включать сюда CSS, но это сетка 2x2.

import { useState } from 'react';

function Container() {
  const [count, setCount] = useState(0);

  return (
    <div className = "gridwrapper">
        <div className = "top_left"> <SomeCustomComponent></div>
        <div className = "bottom_left"> <CustomCounter counter = {count}></div>
        <div className = "bottom_right"> <CustomCounter counter = {count+2}></div>
        <div className = "top_right"><button onClick={() => setCount(count + 1)}>Click me</button><div>
    </div>
  );
}

function CustomCounter({count}){
return(<p>The count is {count}</p>)
}

У меня есть две проблемы прямо сейчас

1. Поскольку setState вызовет повторноерендер, теперь он будет рендеринг целиком. Но мне нужно только две нижние ячейки для повторного рендеринга, так как другие части моего компонента Container даже не зависят от реквизита.

2. Для правильной работы структуры сетки мне нужночтобы обернуть их в div, почему это? Я пытался присвоить имена классов напрямую, но это не сработало

Answer 1

Что касается ненужных повторных рендеров - не беспокойтесь об этом. Движок React достаточно умен, чтобы знать, какие элементы действительно изменились, а какие нет, и он будет обновлять только то, что необходимо.

Answer 2

1. Вы можете использовать слушатель useEffect для изменения только при изменении определенных переменных. Насколько я знаю, вы не можете просто повторно визуализировать часть компонента.
2. Когда вы создаете пользовательский компонент, вам нужно сделать доступным реквизит className на дочернем компоненте.

например

function SomeCustomComponent(props) {
  return (
    <div className={props.className}>
       // ... your component stuff here ..
    </div>
  )
}