如何在React中使用RecoilJS管理大型数据集？

npm install recoil

import { atom } from 'recoil';

export const userState = atom({
  key: 'userState',
  default: null,
});

import { selector } from 'recoil';
import { userState } from './atoms';

export const userNameSelector = selector({
  key: 'userNameSelector',
  get: ({ get }) => {
    const user = get(userState);
    return user ? user.name : '';
  },
});

import React from 'react';
import { useRecoilValue } from 'recoil';
import { userNameSelector } from './selectors';

const UserName = () => {
  const userName = useRecoilValue(userNameSelector);

  return <div>{userName}</div>;
};

export default UserName;

import React, { useState } from 'react';
import { useSetRecoilState } from 'recoil';
import { userState } from './atoms';

const UpdateUserName = () => {
  const [name, setName] = useState('');
  const setUser = useSetRecoilState(userState);

  const handleUpdate = () => {
    setUser((prevUser) => ({ ...prevUser, name }));
  };

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
};

export default UpdateUserName;