超性感的React Hooks（五）：自定义hooks
1
在实践中，我们常常会遇到逻辑相同的功能片段。对于这样的场景，更省力的方式是，将这些功能片段封装成为一个单独函数来使用。
例如，比较两个数组是否相等，可以封装一个equal方法，来处理这个通用逻辑。
export default function equalArr(a: number[], b: number[]) {
if (a.length !== b.length) {
return false;
}
if (a.length === 0 && b.length === 0) {
return true;
}
return a.every((item, i) => item === b[i]);
}假设我们想要实现如下功能：比较左右两侧的数组是否相同。中间红色字为实时比较结果。每个数组都提供两个操作数组的按钮，点击一下，分别往原数组中添加数字1或者数字2 。
结合之前我们总结过的useState与刚才封装好的equalArr方法，能够简单实现我们想要的效果。
分别通过useState定义好两个数组。
const [arrA, setArrA] = useState<number[]>([]);
const [arrB, setArrB] = useState<number[]>([]);因为每次state的变动，都会引起函数组件重新执行，因此，我们可以直接在useState之后添加如下代码，就能够在JSX中拿到最新的比较结果。
const [arrA, setArrA] = useState<number[]>([]);
const [arrB, setArrB] = useState<number[]>([]);
const isEqual = equalArr(arrA, arrB);每个按钮，按要求执行对应的操作即可，例如点击一次，往数组中添加数字1
onClick={() => setArrA([...arrA, 1])}实现后效果如图
完整代码如下：
import React, { useState } from 'react';
import {Button, Flex, Card} from 'antd-mobile';
import equalArr from './equalArr';
import './style.scss';
export default function EqualArr() {
const [arrA, setArrA] = useState<number[]>([]);
const [arrB, setArrB] = useState<number[]>([]);
const isEqual = equalArr(arrA, arrB);
return (
<Flex className="queal_arr_container" justify="between" align="start">
<Card className="inner left" title="左边数组arrA">
<Button className="btn" onClick={() => setArrA([...arrA, 1])}>新增数字1到arrA</Button>
{arrA.map((item, i) => (
<div className="item" key={i}>{item}</div>
))}
<Button className="btn" onClick={() => setArrA([...arrA, 2])}>新增数字2到arrA</Button>
</Card>
<Flex className="middle" justify="center" align="center">{isEqual.toString()}</Flex>
<Card className="inner right" title="右边数组arrB">
<Button className="btn" onClick={() => setArrB([...arrB, 1])}>新增数字1到arrB</Button>
{arrB.map((item, i) => (
<div className="item" key={i}>{item}</div>
))}
<Button className="btn" onClick={() => setArrB([...arrB, 2])}>新增数字2到arrB</Button>
</Card>
</Flex>
)
}理解了这个例子，我们必须要思考的问题是，equalArr和普通的函数方法有什么不同吗？
按照以前的逻辑，我们会用怎么样的方式来来获得对比结果？
大概是这样，当我们点击时：
const clickCallback = () => {
const newArrA = [...arrA, 1];
const isEqual = equalArr(newArrA, arrB);
// 各种处理比较结果isEqual的方式
this.setState({ equal: isEqual });
}唯一的区别在哪里？使用方式不一样！
老的思维，当我们点击时，
1.得到新的数组A，2.执行一次equalArr方法，得到比较结果，3.然后再处理结果。
而新的思维，当我们点击时，我们只关注数组A的变化！
数组变化之后会发生什么事情，全部都交给hook来处理。这些hook，可以是官方自定义的hook，如useEffect，也可以是我们自定义的hook，如此时的equalArr。
想想函数组件的一个特殊性：每次state改变，整个函数都会重新执行一次。那么基于这个特殊性，在新的思维里，我们可以乘机将equalArr也重新执行一次，只要我们能够确保传入的两个比较值为最新值，那么就能够在每次执行时得到最新的比较结果。
这是一次思维方式的减负。利用这样的特性，当触发点击事件时，我们就不再关注额外的逻辑，而只需要关注数组A的变化即可。
在React Hooks中，这样的自定义方法，我们就可以称之为自定义Hooks。
由于使用场景的特殊性，在自定义的hooks中，我们还可以使用所有官方提供的hooks，例如useState，useEffect等。因此我们所有的自定义hooks都会以use开头，以表示该方法只能在函数式组件中使用。
2
自定义hooks是对普通函数的一次增强。
上面的例子中，我们可以简单改造一下，重新自定义一个hook，useEqualArr
import { useState } from 'react';
function equalArr(a: number[], b: number[]) {
if (a.length !== b.length) {
return false;
}
if (a.length === 0 && b.length === 0) {
return true;
}
return a.every((item, i) => item === b[i]);
}
export default function useEqualArr() {
const [arrA, setArrA] = useState<number[]>([]);
const [arrB, setArrB] = useState<number[]>([]);
const isEqual = equalArr(arrA, arrB);
return {
arrA,
setArrA,
arrB,
setArrB,
isEqual
}
}在这个hook中，我们使用useState定义了两个数组，并将所有界面上需要的东西整合成一个对象返回。
那么使用时代码如下
/** 对比两个数组是否相等 */
import React from 'react';
import {Button, Flex, Card} from 'antd-mobile';
import useEqualArr from './useEqualArr';
import './style.scss';
export default function EqualArr() {
const {arrA, arrB, setArrA, setArrB, isEqual} = useEqualArr();
return (
<Flex className="queal_arr_container" justify="between" align="start">
<Card className="inner left" title="左边数组arrA">
<Button className="btn" onClick={() => setArrA([...arrA, 1])}>新增数字1到arrA</Button>
{arrA.map((item, i) => (
<div className="item" key={i}>{item}</div>
))}
<Button className="btn" onClick={() => setArrA([...arrA, 2])}>新增数字2到arrA</Button>
</Card>
<Flex className="middle" justify="center" align="center">{isEqual.toString()}</Flex>
<Card className="inner right" title="右边数组arrB">
<Button className="btn" onClick={() => setArrB([...arrB, 1])}>新增数字1到arrB</Button>
{arrB.map((item, i) => (
<div className="item" key={i}>{item}</div>
))}
<Button className="btn" onClick={() => setArrB([...arrB, 2])}>新增数字2到arrB</Button>
</Card>
</Flex>
)
}是不是超级简单。
仅仅只是改变了写法，可是我们仔细分析一下，自定义hooks有自己特别的语法吗？其实没有。全都得益于state的改变，引发函数组件重新执行这一特性。
3
自定义hook能够跟随函数组件重复执行，并且每次都返回最新结果。因此，我们可以非常放心大胆的封装异步逻辑。
假设我们的项目中，有好几个的地方都要获取到最新的推送消息列表，那么我们就可以将这个逻辑封装成为一个hook。
如图，利用知乎日报提供的公共api来实现一个简单的列表获取功能。
首先创建api文件，定义数据请求的方式
import axios from 'axios';
interface Story {
id?: number,
ga_prefix?: string,
hint?: string,
image_hue?: string,
title?: string,
type?: number,
url?: string,
images?: string[]
image?: string
}
export interface Feed {
date: string,
stories: Story[],
top_stories: Story[]
}
export function zhLastFeedApi(): Promise<Feed> {
return axios.get('https://news-at.zhihu.com/api/4/news/latest').then(res => {
return res.data;
});
}其次自定义一个hook，该hook主要的目标就是通过请求上诉的api，获取到数据，并返回。
// useFeed
import {useState, useEffect} from 'react';
import {zhLastFeedApi, Feed} from './api';
export default function useFeed() {
const [feed, setFeed] = useState<Feed>();
useEffect(() => {
zhLastFeedApi().then(res => {
setFeed(res);
})
}, []);
return feed;
}公共的hook定义好之后，使用就非常简单了。抛开jsx除外，核心代码只有一句，给人的感觉就是直接执行了一个方法useFeed()，就得到了列表数据。
import React from 'react';
import useFeed from './useFeed';
import { ActivityIndicator, Carousel } from 'antd-mobile';
import './style.scss';
// 执行如下指令，禁用chrome跨域限制
// open -a "Google Chrome" --args --disable-web-security --user-data-dir
export default function ZhihuFeed() {
const feed = useFeed();
if (!feed) {
return <div className="feed_container loading"><ActivityIndicator /></div>
}
const {stories, top_stories} = feed;
return (
<div className="feed_container">
<Carousel infinite autoplay dots={false}>
{top_stories.map((item, i) => (
<a className="top_feed_item" key={i} href={item.url}>
<img src={item.image} alt="" />
<div className="title">{item.title}</div>
</a>
))}
</Carousel>
<div className="inner">
{stories.map((item, i) => (
<a className="feed_item" href={item.url} key={i}>
<img src={item.images![0]} alt=""/>
<div className="info">
<div className="title">{item.title}</div>
<div className="tip">{item.hint}</div>
</div>
</a>
))}
</div>
</div>
)
}这样，其他地方想要获取同样的列表，只需要执行一句话就可以了const feed = useFeed();
那么思考一个问题，如果此时我想要刷新怎么办？手动调用一次api吗？
当然不是。
还记得我们刚才说到的新的思维方式吗？当我们想要刷新时，我们只需要修改一个state状态值，让函数重新执行一次就可以了。根据此时的场景，引入一个loading状态，就可以简单达到我们的目的。
自定义hook useFeed修改如下
import {useState, useEffect} from 'react';
import {zhLastFeedApi, Feed} from './api';
export default function useFeed() {
const [feed, setFeed] = useState<Feed>();
const [loading, setLoading] = useState(true);
useEffect(() => {
// 做一个优化判断
if (!loading) {
return;
}
zhLastFeedApi().then(res => {
setLoading(false);
setFeed(res);
})
}, [loading]);
return {feed, setLoading, loading};
}然后使用时就能够通过自定义hook获取到最新的feed与loading。
import React from 'react';
import useFeed from './useFeed';
import { ActivityIndicator, Carousel, Button } from 'antd-mobile';
import './style.scss';
export default function ZhihuFeed() {
const {feed, setLoading, loading} = useFeed();
if (loading) {
return <div className="feed_container loading"><ActivityIndicator /></div>
}
if (!feed) { return null };
const {stories, top_stories} = feed;
return (
// .. 保持不变
<Button onClick={() => setLoading(true)}>刷新</Button>
)
}点击刷新按钮时，我们只需要将loading设置为true即可。useEffect中监听到loading的变化，就会重新请求接口。因此，我们在点击事件的地方就不再去关注它请求数据的逻辑。
基于这样的思考，在实践项目中，我们大概率会重复实现方法去请求同样的数据，用户信息，某个配置项信息，权限信息等等，都可以使用这样的思路一次性解决。
4
再进一步思考。项目中，几乎每一个页面在初始化时都会请求一个接口。而关于这个接口就有许多共同的逻辑需要处理，例如请求成功返回数据，请求失败了页面响应失败信息，我们还需要处理刷新的逻辑。那么留下一个思考题，如何自己定义一个hook，解决这个场景？
// 如何实现？
export default function useInitial() {
}5
认真体会上面所说的新的思维方式。
然后思维回拉到jQuery还横行世界的远古时期。我们想要实现一个超简单的小功能。点击一下按钮，元素div宽度增加10像素。
jQuery中，点击事件会关注那些内容？
1.在原始宽度基础上+10px2.给元素div设置新的宽度值
而React的点击事件呢？只关注一件事儿，那就是数据！
1.this.setState({ width: this.state.width + 10 })
只要我们能够正确处理好数据，React能够帮助我们将相应的页面元素改变渲染好。
而同样的道理，当逻辑变得复杂，我们即使只关注数据，也仍然会在处理数据时，额外思考很多其他的逻辑。
React hooks给我们提供的新思维是，我们只需要掌控一个开关，就能完成我们想要完成的事情。
因此，React与jQuery相比，是一次思维方式的革新与减负。React Hooks与之前的React相比，是另外一次思维革新与减负。这也是React Hooks简单并且高效的秘密。
6
最后留下一个思考题，我们常常会通过埋点，来精确计算一个页面的停留时长，那么如何利用自定义hooks的方式，来优雅的解决这个问题呢？
本系列文章的所有案例，都可以在下面的地址中查看
https://github.com/advance-course/react-hooks
本系列文章为原创，请勿私自转载，转载请务必私信我