react API之startTransition、createContext和lazy解析与案例

2023-11-01 12:50:18

优化React应用的利器：startTransition、createContext和lazy

什么是startTransition？

startTransition是一种React API，用于在状态更新后立即触发UI渲染，但只渲染必要的组件。这有助于避免重新渲染整个组件树，从而提高性能。

何时使用startTransition？

当更新状态可能会触发大量不必要的渲染时，建议使用startTransition。例如，在处理大型数据集合或执行复杂计算时，可以使用startTransition来避免性能瓶颈。

代码示例

import { startTransition } from 'react';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  const handleClick = () => {
    startTransition(() => {
      setTasks([...tasks, 'New Task']);
    });
  };

  return (
    <div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
      <button onClick={handleClick}>Add Task</button>
    </div>
  );
};

在这个例子中，startTransition被用来包裹setTasks的调用，这有助于避免在添加新任务时重新渲染整个组件树。

什么是createContext？

createContext是一种React API，用于在React应用程序中创建和使用共享状态。与使用全局变量或prop传递相比，这有助于提高代码的可读性和可维护性。

何时使用createContext？

当需要在组件树的不同部分之间共享状态时，可以使用createContext。例如，可以在应用程序中创建共享的用户信息或购物车状态。

代码示例

import { createContext, useState } from 'react';

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'Jane Doe' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

const UserButton = () => {
  const { user, setUser } = useContext(UserContext);

  return (
    <button onClick={() => setUser({ name: 'John Smith' })}>
      {user.name}
    </button>
  );
};

在这个例子中，UserContext被用来在UserProvider和UserButton组件之间共享用户状态。

什么是lazy？

lazy是一种React API，用于延迟加载组件，直到它们真正需要时才加载。这有助于减少初始加载时间，提高性能。

何时使用lazy？

当组件很大或不经常使用时，可以使用lazy来延迟加载它们。例如，可以延迟加载仪表盘或报告等组件。

代码示例

import { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
};