ReactJS v18 列表状态管理：优雅实现 CRUD 操作，需要使用 useContext 吗？

在 React v18 中，使用 Context 可以优雅地实现列表的状态管理。可以创建一个 Context 来存储列表的数据和状态，然后在组件中使用该 Context 来获取和更新数据。

首先，创建一个 Context 并定义其初始值：

import { createContext, useState } from 'react';

export const ListContext = createContext();

const ListProvider = ({ children }) => {
  const [list, setList] = useState([]);
  const [itemStatus, setItemStatus] = useState({});

  const fetchList = async () => {
    // 使用 fetch 获取 list 数据
    const response = await fetch('api/list');
    const data = await response.json();
    setList(data);

    // 根据 list 数据去 fetch 每个 list 的状态
    const statusData = await Promise.all(data.map(item => fetch(`api/item/${item.id}`)));
    const statusJson = await Promise.all(statusData.map(response => response.json()));
    const statusMap = statusJson.reduce((map, status, index) => {
      map[data[index].id] = status;
      return map;
    }, {});
    setItemStatus(statusMap);
  };

  const addListItem = async (itemData) => {
    // 使用 fetch 添加新的 list item
    const response = await fetch('api/list', {
      method: 'POST',
      body: JSON.stringify(itemData),
      headers: { 'Content-Type': 'application/json' }
    });
    const newItem = await response.json();
    setList([...list, newItem]);
  };

  const updateListItem = async (itemId, updatedData) => {
    // 使用 fetch 更新 list item
    await fetch(`api/list/${itemId}`, {
      method: 'PUT',
      body: JSON.stringify(updatedData),
      headers: { 'Content-Type': 'application/json' }
    });
    setList(list.map(item => (item.id === itemId ? { ...item, ...updatedData } : item)));
  };

  const deleteListItem = async (itemId) => {
    // 使用 fetch 删除 list item
    await fetch(`api/list/${itemId}`, {
      method: 'DELETE'
    });
    setList(list.filter(item => item.id !== itemId));
  };

  return (
    <ListContext.Provider
      value={{
        list,
        itemStatus,
        fetchList,
        addListItem,
        updateListItem,
        deleteListItem
      }}
    >
      {children}
    </ListContext.Provider>
  );
};

export default ListProvider;

然后，在应用的根组件中使用 ListProvider 提供列表数据和操作方法：

import React, { useEffect, useContext } from 'react';
import { ListContext } from './ListProvider';

const ListComponent = () => {
  const { list, itemStatus, fetchList } = useContext(ListContext);

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <div>
      {list.map(item => (
        <ListItem
          key={item.id}
          item={item}
          status={itemStatus[item.id]}
        />
      ))}
    </div>
  );
};

const ListItem = ({ item, status }) => {
  const { updateListItem, deleteListItem } = useContext(ListContext);

  const handleUpdate = (updatedData) => {
    updateListItem(item.id, updatedData);
  };

  const handleDelete = () => {
    deleteListItem(item.id);
  };

  return (
    <div>
      <span>{item.name}</span>
      <span>{status}</span>
      <button onClick={() => handleUpdate({ name: 'Updated' })}>Update</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
};

const App = () => {
  return (
    <ListProvider>
      <ListComponent />
    </ListProvider>
  );
};

export default App;

在上面的示例中，使用 ListProvider 提供了 list、itemStatus 和相应的操作方法给 ListContext。ListComponent 使用 useContext 获取 list 和 itemStatus，并通过 fetchList 方法在组件挂载时获取列表数据。在 ListItem 组件中，使用 useContext 获取 updateListItem 和 deleteListItem 方法，然后根据需要进行更新和删除操作。

这样，通过使用 Context，可以实现对列表数据和状态的优雅管理，并在每个 list item 上实现 CRUD 操作。

使用 useContext 的必要性

在本例中，使用 useContext 是必要的，因为它允许我们：

• 将列表数据和操作方法集中管理在 ListProvider 中。
• 使 ListComponent 和 ListItem 组件能够访问共享的列表数据和状态。
• 简化组件之间的数据传递，避免 props 传递的繁琐。

其他解决方案

除了 useContext，还有其他解决方案可以实现列表状态管理，例如：

• Redux：适合大型应用程序，提供更强大的状态管理功能。
• Recoil：比 Redux 更轻量级，也易于使用。

选择最适合的解决方案取决于应用程序的规模和复杂性。

总结

在 React v18 中，使用 Context 是一种优雅的方式来实现列表状态管理，并简化每个 list item 的 CRUD 操作。它提供了一种集中管理和共享数据的方式，简化了组件之间的数据传递。然而，对于大型应用程序，可能需要考虑更强大的状态管理方案，例如 Redux 或 Recoil。