useEffect 实践案例（一）

序

对于 useEffect 的掌握是 React hooks 学习的重中之重。因此我们还需要花一些篇幅继续围绕它讲解。

在上一篇文章中，我们使用两个案例分析了 useEffect 的理论知识。接下来，我们通过一些具体的实践案例来学习 useEffect 的运用

1 需求

现有一个简单的需求，要实现一个搜索框，输入内容之后，点击搜索按钮，然后得到一个列表。

当列表为空时，显示暂无数据

接口请求过程中，需要显示 Loading 状态

Loading 状态随便用的一个转圈图标来表示，和下面的图标有点重叠，以后有机会再调整一下 UI

接口请求成功之后，显示一个列表

再次搜索时，显示 Loading 状态

如果接口请求出错，显示错误页面

在实践中，这是针对一个请求所需要的常规状态处理，当然很多时候我们在学习的过程中简化了空数据/Loading/异常等状态，就导致了许多自学的朋友没有在工作中友好处理这些状态的习惯。

2 实现

我们一步一步来实现该需求

我们假设一个请求需要花费 600ms，在学习阶段，我们可以借助 Promise 与 setTimeout 来模拟一个接口请求

单独创建一个 api.ts 文件

在该文件中，我们声明一个名为 searchApi 的函数，该函数接收一个字符串作为参数

我计划设计该函数最终返回一个 Promise 对象。并将一个字符串数组 resolve 出来。该字符串由搜索条件的一个字符与Math.random 产生的随机数组成。

输出的列表长这样

该 api 函数具体代码如下：

// ./api.ts
export function searchApi(param: string) {
  return new Promise<string[]>((resolve, reject) => {
    const p = param.split('')
    const arr: string[] = []
    for(var i = 0; i < 10; i++) {
      const pindex = i % p.length
      arr.push(`${p[pindex] || '^ ^'} - ${Math.random()}`)
    }
    setTimeout(() => {
      if (Math.random() * 10 > 1) {
        resolve(arr)
      } else {
        reject('请求异常，请重新尝试！')
      }
    }, 600)
  })
}

在该函数中，我们使用泛型明确了 Promise 的输出类型，在后续的使用中就可以利用 TypeScript 的自动类型推导得到具体的返回类型

接下来我们要创建组件函数

// index.tsx
export default function DemoOneNormal() {
  // ...
}

然后我们根据 UI 的情况去分析应该在代码中设计哪些数据

首先有一个列表需要展示

const [list, setList] = useState<string[]>([])

然后有一个 Loading 的显示与隐藏需要控制

const [loading, setLoading] = useState(false)

还有一个错误信息需要显示

const [error, setError] = useState('')

还有一个稍微有一些特殊的，输入框中输入的内容。我们要注意准确分析内容：该内容的展示在已有的 UI 中，是根据键盘输入而展示内容，它不由数据来驱动

我们在该案例中，仅仅只是记录输入的内容，并传入 searchApi即可。因此我们可以使用 useRef 来存储该变量

const str = useRef('')

如果情况有变，有其他的 UI 需要该数据来驱动，那么我们就需要将其调整为使用 useState 来存储

接下来思考 JSX 代码的编写

首先是一个输入框 input 与按钮 button

<input 
  className={s.input} 
  placeholder="请输入您要搜索的内容" 
  onChange={(e) => str.current = e.target.value} 
/>
<Button 
  className={s.button} 
  onClick={onSure}
>
  搜索
</Button>

案例中的样式使用了 css module，因此 className 的语法会与前面介绍的有所不同，我们把 s.input 当成一个字符串来看待即可

代码中，借助 input 的 onChange 回调来记录当前输入的值

// const str = useRef('')
onChange={(e) => str.current = e.target.value} 

点击按钮时，修改对应的状态，并开始发送请求。此时 Loading 应该修改为 true

function onSure() {
  setLoading(true)
  searchApi(str.current).then(res => {
    setList(res)
    setLoading(false)
    setError('')
  }).catch(err => {
    setLoading(false)
    setError(err)
  })
}

请求成功之后，Loading 改回 false，list 得到新的数据。如果请求失败，Loading 依然需要改成 false，并记录错误信息

接下来我们要思考列表的 UI 代码。

首先，空数据、错误信息、正常列表的显示情况是互斥的，他们三个只能存在一个。Loading 状态是每个情况下都有可能发生的，与他们的关系是分别共存的

因此，当有错误信息时，这一块的内容应该为

if (error) {
  return (
    <div className={s.wrapper}>
      {loading && (
        <div className={s.loading_wrapper}>
          <Icon spin type='loading' style={{ fontSize: 40 }} />
        </div>
      )}
      <Icon type='event' color='red' style={{ fontSize: 32 }} />
      <div className={s.error}>{error}</div>
    </div>
  )
}

案例中出现的 Icon 组件是一个图标，该组件是我们这个项目自己封装好的基础组件

当是空列表时

if (list.length === 0) {
  return (
    <div className={s.wrapper}>
      {loading && (
        <div className={s.loading_wrapper}>
          <Icon spin type='loading' color='#2860Fa' style={{ fontSize: 38 }} />
        </div>
      )}
      <Icon type='event' color='#ccc' style={{ fontSize: 32 }} />
      <div className={s.nodata}>暂无数据</div>
    </div>
  )
}

正常列表有数据时

<div className={s.list}>
  {loading && (
    <div className={s.loading_wrapper}>
      <Icon spin type='loading' color='#2860Fa' style={{ fontSize: 38 }} />
    </div>
  )}

  {list.map(item => (
    <div key={item} className={s.item}>{item}</div>
  ))}
</div>

OK，此时所有的逻辑已经考虑完毕

3 优化封装

我们会发现，列表相关的逻辑实在是有点繁琐。如果每次遇到一个列表就要处理这么多，岂不是非常消耗时间？

因此我们这里考虑将这些逻辑统一封装到 List 组件里，下次要使用直接拿出来用就可以了

// ./List/index.tsx
export default function List(props) {}

在封装时，我们首先要考虑哪些属性需要作为 props 传入该 List 组件。关于封装的思考，和其他的逻辑封装是一样的，我们需要先考虑在不同的场景之下，他们的共性与差异分别是什么，差异的部分作为参数传入

三个数据，error，loading，list 都是差异部分，他们需要作为 props 传入

先定义一个类型声明如下

interface ListProps<T> {
  loading?: boolean,
  error?: string,
  list?: T[]
}

此时我们看到由于 list 的每一项具体数据内容，可能每一个列表都不一样，我们无法在这里确认他的类型，因此此处使用泛型来表示

不知道 list 的每一项具体数据是什么，也就意味着对应的 UI 我们也无法提前得知，只有在使用时才知道，因此还应该补上一个新的 props 属性

interface ListProps<T> {
  loading?: boolean,
  error?: string,
  list?: T[],
+ renderItem: (item: T) => ReactNode
}

然后我们只需要把差异部分与共同部分在组件逻辑中组合起来即可，List 组件完整代码如下

import Icon from 'components/Icon'
import { ReactNode } from 'react'
import s from './index.module.scss'

interface ListProps<T> {
  loading?: boolean,
  error?: string,
  list?: T[],
  renderItem: (item: T) => ReactNode
}

export default function List<T>(props: ListProps<T>) {
  const {list = [], loading, error, renderItem} = props

  if (error) {
    return (
      <div className={s.wrapper}>
        {loading && (
          <div className={s.loading_wrapper}>
            <Icon spin type='loading' style={{ fontSize: 40 }} />
          </div>
        )}
        <Icon type='event' color='red' style={{ fontSize: 32 }} />
        <div className={s.error}>{error}</div>
      </div>
    )
  }

  if (list.length === 0) {
    return (
      <div className={s.wrapper}>
        {loading && (
          <div className={s.loading_wrapper}>
            <Icon spin type='loading' color='#2860Fa' style={{ fontSize: 38 }} />
          </div>
        )}
        <Icon type='event' color='#ccc' style={{ fontSize: 32 }} />
        <div className={s.nodata}>暂无数据</div>
      </div>
    )
  }

  return (
    <div className={s.list}>
      {loading && (
        <div className={s.loading_wrapper}>
          <Icon spin type='loading' color='#2860Fa' style={{ fontSize: 38 }} />
        </div>
      )}

      {list.map(renderItem)}
    </div>
  )
}

封装好之后，使用起来就非常简单了，我们只需要把当前上下文中的数据传入进去即可。

<List 
  list={list} 
  loading={loading}  
  error={error}
  renderItem={(item) => (
    <div key={item} className={s.item}>{item}</div>
  )}
/>

该案例组件文件路径：src/pages/demos/effect/search/Normal.tsx

4 需求改进

在某些场景，初始化时我们并不需要展示空数组，而是需要请求一次接口，然后展示对应的列表，因此，在这种需求的情况下，代码需要进行一些调整

首先，Loading 的初始化状态需要从 false 改为 true，表示一开始就会立即请求数据

- const [loading, setLoading] = useState(false)
+ const [loading, setLoading] = useState(true)

然后初始化请求数据的操作，在 useEffect 中完成，传入空数组作为依赖项，表示只在组件首次渲染完成之后执行一次

... 

+ useEffect(() => {
+   searchApi(str.current).then(res => {
+     setList(res)
+     setLoading(false)
+     setError('')
+   }).catch(err => {
+     setLoading(false)
+     setError(err)
+   })
+ }, [])

function onSure() {
  setLoading(true)
  searchApi(str.current).then(res => {
    setList(res)
    setLoading(false)
    setError('')
  }).catch(err => {
    setLoading(false)
    setError(err)
  })
}

...

OK，这样需求就完整的被解决，不过此时我们发现，useEffect 的逻辑与 onSure 的逻辑高度重合，他们一个代表初始化逻辑，一个代表更新逻辑。

因此在代码上做一些简单的调整

function getList() {
    searchApi(str.current).then(res => {
      setList(res)
      setLoading(false)
      setError('')
    }).catch(err => {
      setLoading(false)
      setError(err)
    })
  }

  useEffect(() => {
    getList()
  }, [])

  function onSure() {
    setLoading(true)
    getList()
  }

这样调整了之后，我们发现一个有趣的事情，当点击搜索按钮触发 onSure 时，我们会执行一次把 loading 修改为 true 的操作

setLoading(true)

那如果这个时候，我们就可以把 loading 作为 useEffect 的依赖项传入，onSure 里就可以只保留这一行代码

useEffect(() => {
  loading && getList()
}, [loading])

function onSure() {
  setLoading(true)
}

这就是我们在本书唯一付费章节「React 哲学」中提到的开关思维。在日常生活中，如果我想要打开电视机，我们只需要关注开关按钮那一下操作，在这里也是一样，如果我想要重新请求列表搜索，我只需要关注如何操作 loading 这个开关即可

该案例组件文件路径：src/pages/demos/effect/search/Normal2.tsx

接下来我们将要学习自定义 hook，进一步感受开关思维的魅力。

本文由微信公众号这波能反杀原创，哈喽比特收录。
文章来源：https://mp.weixin.qq.com/s/nR9zczAZ5WZb1oG7w5cJDA