如何在重新渲染时优化ReactJS中的App

如何解决如何在重新渲染时优化ReactJS中的App

我必须在这里优化此应用程序，如何实现onDelete或将onDelete传递给Child，以便每次重新渲染时都没有新功能？ （不允许更改子组件）

function App() {
  const [names,setNames] = React.useState(["iamfirst","methesecond"]);

  const onDelete = useCallback( (index:number) => {
    setNames((prev) => prev.filter((_,i) => i !== index));
  },[]);

  return (
    <div>
      {names.map((name,index) => (
        <Child
          key={index}
          name={name}
          onChange={onNameChange}
          onDelete={()=>onDelete(index)}
        />
      ))}
    </div>
  );
}

解决方法

尝试一下

onDelete={this.onDelete}

,

尝试一下

 onDelete={onDelete.bind(null,index)}

,

删除子组件无论如何都会重新渲染您的子组件，因为从数组中删除1个项目时您正在将索引传递给键，因为键已更改，因此您将更新所有子组件。为避免重新渲染，您所有的孩子都应具有ID，您将依靠此ID。另外，您不应像示例onDelete={()=>onDelete(index)}中那样直接传递箭头功能。

因此，应重构您的解决方案以满足这些要求，并且如果不进行Child的修改是不可能的。