Question

我正在用CSS网格编写一个React应用。我不会在此处包括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>)
}

我现在有两个问题

由于setState会导致重新渲染，因此现在它将重新渲染整个对象。但是我只需要底部的两个单元格即可重新渲染，因为我的Container组件的其他部分甚至都不依赖于道具。
为了使我的网格结构正常工作，我需要将它们包装在div中，为什么？我曾尝试直接分配类名，但是没有用

Answer 1

您可以使用useEffect侦听器仅在特定变量更改时更改。据我所知，您不能只重新渲染组件的一部分。
制作自定义组件时，还需要在子组件上提供className属性。

例如

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

Answer 2

关于不必要的重新渲染-不用担心。 React diffing引擎足够聪明，可以知道哪些元素实际更改了，哪些元素没有更改，它只会更新必要的内容。

如何让React只渲染部分组件？

2 个答案: