Question

每当父组件更新其状态时，组件都会经常重新呈现，这有些麻烦。

我有一个简单的User组件，它显示一个名称。 App组件使用useState存储多个用户。每当运行提供的回调onClick时，所有组件都将重新呈现，这会降低性能。我尝试使用useCallback来防止这种情况的发生。该代码可以运行here。每当父级更新用户状态时，如何防止其他组件重新呈现？

const App = () => {
  const [users, setUsers] = useState([
    { id: 1, name: "Cory" },
    { id: 2, name: "Meg" },
    { id: 3, name: "Bob" }
  ]);

  const deleteUser = useCallback(id => {
    setUsers(users => users.filter(user => user.id !== id));
  }, []);

  const renderUser = user => {
    return <User key={user.id} user={user} onClick={deleteUser} />;
  };

  return (
    <div>
      <h1>Users</h1>
      <ul>{users.map(renderUser)}</ul>
    </div>
  );
};

用户

const User = props => {
  const onDeleteClick = () => {
    props.onClick(props.user.id);
  };

  console.log(`${props.user.name} just rendered`);
  return (
    <li>
      <input type="button" value="Delete" onClick={onDeleteClick} />
      {props.user.name}
    </li>
  );
};

Answer 1

在子级组件中使用React.memo

export default React.memo(User);

Answer 2

您可以在React.memo组件中使用User来停止重新渲染该组件。

工作链接：https://codesandbox.io/s/no-arrow-func-render-eziql

希望这会有所帮助！

每当父级状态更改时，避免在子级组件中使用回调来重新渲染

2 个答案: