如何让反应只渲染组件的一部分？答案

【问题标题】：How to let react only render part of the component?如何让反应只渲染组件的一部分？
【发布时间】：2019-10-01 15:30:07
【问题描述】：

我正在编写一个带有 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>)
}

我现在有两个问题

由于 setState 会导致重新渲染，现在它会重新渲染整个内容。但是我只需要重新渲染底部的两个单元格，因为我的 Container 组件的其他部分甚至不依赖于 props。
为了让我的网格结构正常工作，我需要将它们包装在 div 中，这是为什么呢？我之前尝试过直接分配类名，但没有成功

【问题讨论】：

标签： reactjs grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

例如

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

【讨论】：