一句话解释 useCallback 与 useMemo 的区别 & 作用

本文经作者授权转载,原文作者:HD Superman,原文链接:一句话解释 useCallback 与 useMemo 的区别 & 作用

背景

最近在重构其他项目的代码,发现很多新手写的代码没有做好 hook 内存优化,在解释为什么需要以及 useCallback 和 useMemo 的区别,顺便写下来。

解释

一句话:useCallback 缓存钩子函数,useMemo 缓存返回值(计算结果)。

type DependencyList = ReadonlyArray;

function useCallback any>(callback: T, deps: DependencyList): T;

function useMemo(factory: () => T, deps: DependencyList | undefined): T;

一些文章长篇大论解释,其实直接看 typescript 声明就知道作用了,泛型 T 在 useCallback 中是一个钩子函数,在 useMemo 中是一个返回值。

作用

一个简单计数器 demo 解释全部作用:点击按钮 count 加 1,同时显示这个数是奇数还是偶数

不用 hook 的代码

import React, { FC, useCallback, useMemo, useState } from 'react';

const Index: FC = (props) => {
  const [count, setCount] = useState(0);

  const isEvenNumber = count % 2 === 0;
  const onClick = () => setCount(count + 1);

  return (
    
{count} is {isEvenNumber ? 'even':'odd'} number
); };

使用 hook 后的代码

import React, { FC, useCallback, useMemo, useState } from 'react';

const Index: FC = (props) => {
  const [count, setCount] = useState(0);

  const isEvenNumber = useMemo(() => {
    return count % 2 === 0;
  }, [count]);

  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    
{count} is {isEvenNumber ? 'even':'odd'} number
); };

看起来没有什么区别,甚至使用 hook 后代码还变复杂了。这个 demo 比较简单,所有使用 hook 后的优化效果不明显,大部分代码即使使用第一种写法都没有太大区别,用户无感知,但系统逐步升级后为了占用更小的内存、更流畅的使用体验 hook 是必要的。

如果不使用 hook,每次组件 re-render 的时候,都需要重新计算 isEvenNumber 的值,以及 new 一个 onClick 函数,即使每次计算结果没有改变,也要重复这个浪费内存的操作,hook 可以缓存相关结果,避免重复渲染时的无效计算。

useCallback 和 useMemo 的参数都是一个函数加一个依赖数组,依赖没有改变时直接返回内存中缓存的结果,无需重复计算。简单理解就是 useCallback 缓存事件处理函数,useMemo 缓存二次计算的结果,如上面的点击事件,以及通过 count 值判断奇数偶数的二次计算结果。

本质原因

React 的函数组件是非常好用的东西,相比 class 写法以及 Vue 的对象挂载写法简洁很多,代码测试复用成本低,容易入手,但也带来一些问题,无状态函数很理想,但现实有一些计算开销大、组件渲染频繁的场景是需要状态的,每次都计算一遍状态(callback 和 二次计算值)无疑很浪费内存,函数不像对象(React class 写法或者 Vue 组件写法)可以直接将状态挂载在自身,没有浪费内存的问题,要实现类似的效果只能找一个的内存挂载点挂载这些东东,所以有了 useCallback 和 useMemo 这些 hook。

你可能感兴趣的:(react.jshook)