javascript - 如何避免重新渲染所有列表项

Question

每次点击都会重新渲染每个项目。如何避免呢？我只想对已更改的渲染项目使用react。我尝试使用 React memo 和 usecallback 但没有帮助。我不明白这是什么原因。有哪些方法可以解决这个问题呢？谢谢。

App.ts

import React, { useState } from "react";
import "./styles.css";
import ListItem from "./ListItem";

const items = [
  { id: 1, text: "items1" },
  { id: 2, text: "items2" },
  { id: 3, text: "items3" },
  { id: 4, text: "items4" },
  { id: 5, text: "items5" },
  { id: 6, text: "items6" },
  { id: 7, text: "items7" }
];

export default function App() {
  const [activeIndex, setActiveIndex] = useState(1);
  const onClick = (newActiveIndex: number) => {
    setActiveIndex(newActiveIndex);
  };

  return (
    <div className="App">
      {items.map(({ id, text }) => (
        <ListItem
          key={id}
          id={id}
          text={text}
          activeId={activeIndex}
          onClick={onClick}
        />
      ))}
    </div>
  );
}

Item.ts

import React from "react";

interface ListItemProps {
  id: number;
  activeId: number;
  text: string;
  onClick: (newActiveIndex: number) => void;
}

const ListItem: React.FC<ListItemProps> = ({ id, activeId, text, onClick }) => {
  const isActive = activeId === id;
  const style = {
    marginRight: "42px",
    marginTop: "24px",
    color: isActive ? "green" : "red"
  };
  console.log(`update id: ${id}`);

  return (
    <div>
      <span style={style}>id: {id}</span>
      <span style={style}>is active: {isActive ? "active" : "inactive"}</span>
      <span style={style}>text: {text}</span>
      <button onClick={() => onClick(id)}>setActive</button>
    </div>
  );
};

export default ListItem;

Answer 1

activeIndex 随着每次点击而变化，因此所有组件都有新的 prop 值，并且需要重新渲染。

而不是每次都将 activeIndex 传递给每个组件:

const ListItem: React.FC<ListItemProps> = ({ id, activeId, text, onClick }) => {
  const isActive = activeId === id;

将 isActive 传递给每个组件:

const ListItem: React.FC<ListItemProps> = ({ id, isActive, text, onClick }) => {

有效地将 bool 的计算从组件转移到使用代码:

<ListItem
  key={id}
  id={id}
  text={text}
  isActive={activeIndex === id}
  onClick={onClick}
/>

然后内存(与 onClick 处理程序的 useCallback 结合使用)应该可以工作，因为大多数组件(不改变其“事件”状态的组件)不会接收新的 Prop 并且不需要重新渲染。