小编Adr*_*llo的帖子

我有一个与 React 渲染有关的简单问题。在我解释之前，这是代码沙箱的链接：https://codesandbox.io/s/list-rerendering-y3iust ?file=/src/App.js

事情是这样的，我有一个对象数组存储在名为 App 的父组件中。每个对象都有一个“选中”字段，我想通过单击该对象各自的复选框来切换该字段。我循环遍历对象数组并将它们分别显示在子组件中。当我单击复选框时，handleChange 函数会执行，并且该列表会在父组件中更新，从而导致应用程序与所有子组件一起重新呈现。我想解决的问题是，如何才能只重新渲染被单击的子组件而不是全部组件？

我尝试使用 useCallback 以及对列表状态的功能更新，但这没有做任何事情，它仍然重新渲染所有子组件而不是被切换的子组件。我有预感，我错误地使用了 useCallback，并且正在创建一个全新的函数。我想解释一下 React 如何在数组方面进行重新渲染，将以前的数组与新数组进行比较。据我所知，在我的代码中，我通过解构原始列表的副本，然后将其放入新数组中，这显然不是对原始列表的引用，因此 React 将副本设置为新状态：

应用程序.js

import { useCallback, useState } from "react";
import Child from "./Child";
import "./styles.css";

const mockList = [
  { text: "1", id: 1, checked: false },
  { text: "2", id: 2, checked: false },
  { text: "3", id: 3, checked: false },
  { text: "4", id: 4, checked: false },
  { text: "5", id: 5, checked: false } …

我一直在使用 create-react-app 来创建我所有的 React 应用程序。最终，我遇到了这个问题，当我运行 npm start 时，出现以下错误：

Failed to compile

    ./src/App.js
    Error: ENOSPC: no space left on device, write

我做了很多研究，但仍然不知道如何解决这个问题。我知道它必须执行系统设置的“手表”数量，并且我已经达到了该限制，但我不知道如何更改限制或删除以前的手表。