React Hook中useCallback及http封装及其最佳实践
前言
最近开始学习React，跟着Kent学，有很多干货，这里分享React Hook中的useCallback
代码分享到了codesandbox，App.js是最后的最佳实践，中间代码放在了archive文件夹上了
一、background
正常来说，当处理sideEffect的时候，useEffect的第二个参数会传一个dependence list，只有当list中地参数变化时候，这个effect才会被重新触发，比如
React.useEffect(() => {
window.localStorage.setItem('count', count)
}, [count])
这里只有当count变化的时候，才会setItem(‘count’, count)到localstorage
这里的count是变量，如果是函数的话，就没那么简单了
const updateLocalStorage = () => window.localStorage.setItem('count', count)
React.useEffect(() => {
updateLocalStorage()
}, [updateLocalStorage])
useEffect是定义在再component的函数体内的，一旦component被render，updateLocalStorage就会被重新initialised，所以dependency list中的updateLocalStorage肯定是会变化的，也就是useEffect每次都会因为component更新而重新执行
于是，useCallback就可以用上场了；updateLocalStorage 函数使用useCallback包裹，把count定义成它的dependency
const updateLocalStorage = React.useCallback(
() => window.localStorage.setItem('count', count),
[count],
)
React.useEffect(() => {
updateLocalStorage()
}, [updateLocalStorage])
二、应用
2.1 原型
这里还是通过pokemon的例子，这里例子在讲React Hook处理http请求也用过，这里同样适用于useCallback的应用，原型可以参考这里
2.2 需求场景
用户每次输入pokemon的时候，就会出发http请求，并且我们把http请求的逻辑搬离在组件外面
之前，我们使用useEffect
const [state, dispatch] = React.useReducer(asyncReducer, {
status: pokemonName ? 'pending' : 'idle',
pokemon: null,
error: null,
})
React.useEffect(() => {
if (!pokemonName) {
return
}
dispatch({type: 'pending'})
fetchPokemon(pokemonName).then(
pokemon => {
dispatch({type: 'resolved', pokemon})
},
error => {
dispatch({type: 'rejected', error})
},
)
}, [pokemonName])
这里的pokemonInfoReducer其实就是统一处理http正status(idle, pending, resolved, rejected)的逻辑，实现如下
function asyncReducer(state, action) {
switch (action.type) {
case "pending": {
return { status: "pending", data: null, error: null };
}
case "resolved": {
return { status: "resolved", data: action.data, error: null };
}
case "rejected": {
return { status: "rejected", data: null, error: action.error };
}
default: {
throw new Error(`Unhandled action type: ${action.type}`);
}
}
}
现在，如果我们需要把这段useEffect抽离，变成如下的API，将会增加http的复用逻辑，并且也做到一定的解耦。也就是说，我们通过useAsync(asyncCallback, initialState)返回{data, status, error}的state
const state = useAsync(
() => {
if (!pokemonName) {
return
}
return fetchPokemon(pokemonName)
},
{status: pokemonName ? 'pending' : 'idle'},
[pokemonName],
)
const {data: pokemon, status, error} = state
之后，useAsync的实现如下，只要传入需要请求的http函数，useReducer的initialState，以及dependency list，就可以返回{data, status, error}的state，这样就把useEffect的异步请求做了一次封装，之后类似的场景就可以使用了
function useAsync(asyncCallback, initialState, dependencies) {
const [state, dispatch] = React.useReducer(asyncReducer, {
status: 'idle',
data: null,
error: null,
...initialState,
})
React.useEffect(() => {
const promise = asyncCallback()
if (!promise) {
return
}
dispatch({type: 'pending'})
promise.then(
data => {
dispatch({type: 'resolved', data})
},
error => {
dispatch({type: 'rejected', error})
},
)
// eslint plugin 会报错
}, dependencies)
return state
}
2.2 演进 - 解决dependency list的问题
上面的useAsync有个问题，就是传入的dependencies eslint是会报错的，我们需要解决这个问题。
我们本质上是希望asyncCallback这个函数只有在变化的时候才触发useEffect，那么，我们是不是可以把asyncCallback放在dependency list中呢？是不可以的，原因就是asyncCallback这个函数会在就会在每次useEffect被重新initialised，所以回到我们background中讲到的问题。React于是提出了useCallback来解决我们遇到的问题
具体来说我们需要把asyncCallback通过useCallback包裹起来，并且告诉React什么时候才会触发useCallback；那么，对于pokemon的例子，asyncCallback是在pokemonName改变的时候真正需要触发，那么asyncCallback的修改如下
const asyncCallback = React.useCallback(() => {
if (!pokemonName) {
return;
}
return fetchPokemon(pokemonName);
}, [pokemonName]);
有了上面的改进之后，我们就可以重新改一下之前的代码了
function PokemonInfo({ pokemonName }) {
const asyncCallback = React.useCallback(() => {
if (!pokemonName) {
return;
}
return fetchPokemon(pokemonName);
}, [pokemonName]);
const state = useAsync(asyncCallback, {
status: pokemonName ? "pending" : "idle"
});
const { data: pokemon, status, error } = state;
...
//处理render的逻辑
}
useAsync传入的参数也变少了，因为我们不再需要传入dependency list
const useAsync = (asyncCallback, init) => {
const [state, dispatch] = React.useReducer(pokemonInfoReducer, {
status: "idle",
data: null,
error: null,
...init
});
React.useEffect(() => {
const promise = asyncCallback();
if (!promise) {
return;
}
dispatch({ type: "pending" });
promise.then(
(data) => {
dispatch({ type: "resolved", data });
},
(error) => {
dispatch({ type: "rejected", error });
}
);
}, [asyncCallback]);
return state;
};
2.2 演进 - 解决组件需要写asyncCallback
上面的方案是提高了性能，但是问题是每次使用组件的时候，都需要记得写asyncCallback才行，这个在团队中是比较难以做到统一的，我们需要让组件使用者不需要写asyncCallback，这样才能保证性能不受API使用者的影响；这样使用者的代码大致应该如下，useAsync向外提供run方法，这个方法接受一个promise然后负责执行，结果保存到data中
const { data: pokemon, status, error, run } = useAsync({
status: pokemonName ? "pending" : "idle"
});
React.useEffect(() => {
if (!pokemonName) {
return;
}
run(fetchPokemon(pokemonName));
}, [pokemonName, run]);
结合上面的使用需求，不妨把引入asyncCallback到useAsync function中，代码修改如下；
function useAsync(initialState) {
const [state, dispatch] = React.useReducer(pokemonInfoReducer, {
status: 'idle',
data: null,
error: null,
...initialState,
})
const run = React.useCallback((promise) => {
dispatch({type: 'pending'})
promise.then(
data => {
dispatch({type: 'resolved', data})
},
error => {
dispatch({type: 'rejected', error})
},
)
}, [])
return {...state, run}
}
至此，一个比较完整的useAsync解法方案也就完成了，使用者只需要调用useAsync，并提供reducer的initState就能比较高性能地调用http并且获取数据，做到了组件以及http请求的解耦
当然这个useAsync的封装也并不是完美的，有一个小bug，那就是dispatch是不安全的；具体来说就是如果用户在dispatch没玩完成之前就离开这个component就会有如下的warming
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
解决方案就是需要实现一个useSafeDispatch函数，由于实现起来有点复杂，内容超出跟本文章讨论的范畴，这里就不提供实现了，大家感兴趣可以留言实现方案，我们可以讨论
总结
这里比较细致讲了useCallback的使用场景，以及通过具体的例子演进了通过useCallback的http通用函数的封装；总的来说useCallback一般使用场景就是dependency list传入函数；在写代码的时候对于可以复用的代码尽量进行封装，并向外提供可靠简单的API