序
对于 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，进一步感受开关思维的魅力。
