组件复用

在构建Web页面上的组件的时候，在UI的很多地方都需要重用数据。使用SWR在不同的组件间复用数据是非常简单的，只需要定义一个自定义Hook即可。

function useUser(id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher);

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  };
}

这样的Hook就可以在组件中使用了，这样使用自定义Hook获取的数据可以使代码变得更加声明性，使用数据的组件中只需要声明自己使用哪些数据即可。

function UserDetail({ id }) {
  const { user, isLoading, isError } = useUser(id);

  if (isLoading) return <Spinner />;
  if (isError) return <Error />;
  return <div>{user.name}</div>;
}

在这种模式下，所有的数据都将会被绑定到需要这些数据的组件上，并且还能够保证组件之间的独立性，父组件也不需要关心数据的组织和传递，从而使代码更加简单。