Hooks编程扫盲（一）-- useSWR

一、背景

Vue 3.0已经出到3.0.5了，React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks，那么Hooks式的编程到底有什么好处？

参加本人的这篇文章。

二、使用

项目	React	Vue
包名	swr	vue-swr
仓库地址	github-swr	github-vue-swr

二、useSWR

随着React Hooks的浪潮，各种基于Hooks 的方案越来越多，其中主要包含 状态管理、数据请求、通用功能的封装 等等。而 数据请求 是日常业务开发中最常见的需求，那么在 Hooks 模式下，我们应该如何请求数据，先来看下面的一个简单示例。

需求场景

产品需求：首页通过接口获取 github trending 项目列表，然后点击列表项可查看单个项目的信息。

程序实现：接到需求后一顿操作，无非就是在数据请求时需要显示 loading效果，数据获取完成时展示列表数据，以及考虑请求错误后的容错处理，稳健如飞的撸出了如下代码：

// 首页列表实现
const Home = () => {
   
  // 设置初始数据
  const [data, setData] = useState([]) 
  // 设置初始状态
  const [isLoading, setIsLoading] = useState(false)
  // 设置初始错误值
  const [isError, setIsError] = useState(false)

  useEffect(() => {
   
    // 定义 fetchFn 
    const fetchData = async () => {
   
      setIsLoading(true)
      try {
   
        const result = await fetch('api/data')
        setData(result)
      } catch(error) {
   
        setIsError(true)
      }
      setIsLoading(false)
    }
    // 调用接口
    fetchData()
  }, [])
  
  return (
     <div className='hero'>
        <h1 className='title'>Trending Projects</h1>
        {
   isError && <div>Something went wrong ...</div>}
        <div>
            {
   
              isLoading ? 'loading...' :
              data.map(project =>
                <p key={
   project}><Link href='/[user]/[repo]' as={
   `/${
     project}`}><a>{
   project}</a></Link></p>
              )
            }
        </div>
    </div>
  )
}

获取项目详情实现与上面基本一样，基础代码如下：

// 项目详情实现
const project = () => {
   
  const [data, setData] = useState([]) 
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = use