React高阶组件：实现优雅的分页和搜索

2023-10-13 06:35:35

作为现代Web开发的重要工具，React以其强大的功能和灵活的组件系统脱颖而出。对于构建复杂的应用程序，高阶组件(HOC)是一种极有用的模式，它允许我们在不修改现有组件的情况下增强它们的特性。本文将探讨如何利用React HOC实现优雅的分页和搜索功能，提升用户体验。

分页：按需加载数据

分页是一种常见技术，它将大量数据分成较小的块，按需加载。这不仅可以提高性能，还能提升用户体验。React中实现分页的一种方法是使用HOC。

const withPagination = (Component) => (props) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      // 获取当前页的数据
      const data = await fetch(`/api/data?page=${currentPage}&size=${pageSize}`);
      setData(data);
    };
    fetchData();
  }, [currentPage, pageSize]);

  return (
    <Component
      {...props}
      currentPage={currentPage}
      setCurrentPage={setCurrentPage}
      pageSize={pageSize}
      setPageSize={setPageSize}
      data={data}
    />
  );
};

这个HOC接受一个组件作为参数，并返回一个新的组件，该组件包含分页所需的附加状态和方法。原始组件可以使用props访问这些附加特性，从而在无需修改的情况下实现分页。

搜索：快速过滤数据

搜索是另一种增强用户体验的有用功能。React中实现搜索的另一种方法是使用HOC。

const withSearch = (Component) => (props) => {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredData = data.filter((item) => {
    return item.name.toLowerCase().includes(searchTerm.toLowerCase());
  });

  return (
    <Component {...props} searchTerm={searchTerm} setSearchTerm={setSearchTerm} data={filteredData} />
  );
};