有一个渲染用户卡片的组件

import React from "react";

const User = React.memo(function({id, name, isSelected, ...other}) {
  return (
    <div {...other}>
      {name} - {isSelected && "Selected"}
    </div>
  );
});

export default User;

以及渲染用户卡的父组件

import React from "react";

function Application() {
  const [users, setUsers] = React.useState([
    {id: 1, name: "John Doe #1"},
    {id: 2, name: "John Doe #2"},
    {id: 3, name: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  return users.map((user) => {
    const isSelected = selectedUserId === user.id;

    return (
      <User
        {...user}
        key={user.id}
        isSelected={isSelected}
        onClick={() => setSelectedUserId(user.id)}
      />
    );
  });
}

export default Application;

任务是“选择用户后避免重新渲染其他用户卡”

我尝试使用 React.useCallback 钩子，这是我的第一个实现

import React from "react";

const User = React.memo(function({id, name, isSelected, ...other}) {
  return (
    <div {...other}>
      {name} - {isSelected && "Selected"}
    </div>
  );
});

function Application() {
  const [users, setUsers] = React.useState([
    {id: 1, name: "John Doe #1"},
    {id: 2, name: "John Doe #2"},
    {id: 3, name: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  const handleSelectUser = React.useCallback((userId) => () => {
    setSelectedUserId(userId);
  }, []);

  return users.map((user) => {
    const isSelected = selectedUserId === user.id;

    return (
      <User
        {...user}
        key={user.id}
        isSelected={isSelected}
        onClick={handleSelectUser(user.id)}
      />
    );
  });
}

export default Application;

在这种情况下，React.useCallback 返回一个具有新引用的匿名函数

结果：每次点击后所有用户卡仍重新呈现

我决定将这个匿名函数包装在 React.useCallback

import React from "react";

const User = React.memo(function({id, name, isSelected, ...other}) {
  return (
    <div {...other}>
      {name} - {isSelected && "Selected"}
    </div>
  );
});

function Application() {
  const [users, setUsers] = React.useState([
    {id: 1, name: "John Doe #1"},
    {id: 2, name: "John Doe #2"},
    {id: 3, name: "John Doe #3"}
  ]);
  const [selectedUserId, setSelectedUserId] = React.useState(null);

  const handleSelectUser = React.useCallback((userId) => {
    return React.useCallback(() => {
      setSelectedUserId(userId);
    }, []);
  }, []);

  return users.map((user) => {
    const isSelected = selectedUserId === user.id;

    return (
      <User
        {...user}
        key={user.id}
        isSelected={isSelected}
        onClick={handleSelectUser(user.id)}
      />
    );
  });
}

export default Application;

问题解决了，但是还有一个问题，我做对了吗？ React 团队说：不要在循环、条件或嵌套函数内调用 Hooks，我会得到什么副作用？

附注不要触摸用户组件