useMemo 和 useCallback —— React Hook

useMemo

一、作用

useMemo 和 memo 作用相同，都是用来做性能优化的，不会影响业务逻辑。

memo函数，针对的是一个组件的渲染，是否重复执行。(<Foo/>)
useMemo，定义了一段函数逻辑，是否重复执行。(() => {})

本质都是利用同样的算法，判断依赖是否发生改变，进而决定是否触发特定逻辑。

二、使用语法

import React, { useMemo } from 'react'

useMemo(() => {}, [] )

这里有几个注意点：

  1. useMemo的第一个参数是函数，第二个参数一般都为数组。
  2. 如果不传第二个参数，与useEffect类似，意味着每一次都会执行第一个函数参数，那么使用useMemo的意义就没有了。
  3. 如果第二个参数传的是空数组[]，与useEffect类似，只执行一次。
  4. useMemo与useEffect有不一样的一点就是调用时机 —— useEffect执行的是副作用，所以一定是在渲染之后运行的；而useMemo是需要有返回值的，返回值会参与渲染，所以useMemo是是在渲染期间完成的。

三、具体demo代码

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

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count}</h1>
          <h1>double: {double}</h1>
      </div>
  )
}

export default App;

这里使用了count === 3这个表达式的结果（布尔值，true/false），作为是否重新渲染Double组件的判断依据。

所以随着count从0开始的每一次的加一，Double组件最终也只会重新渲染两次：

  • 当count值为3的时候，count === 3这个表达式的结果为true，发生改变了。
  • 当count值为4的时候，count === 3这个表达式的结果为false，发生改变了。

结果演示：


初始状态

点了两次按钮，double没变

当count为3时，double终于变了

count为4时，double也变为8

之后就再也没变化过了

三、useMemo中依赖的值，也可以是一个useMemo

但千万要注意，不要循环依赖！

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

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

    const half = useMemo(() => {
        return count / 2
    }, [double])


  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count} double: { double } half: { half }</h1>
      </div>
  )
}

export default App;
half只有在double发生变化的时候才变化

四、优化子组件重渲染的场景

1. 先展示还没优化前的场景

可以观察到，每一次App组件里的count加1，Counter子组件就会重新渲染一次（控制台输出）。

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

function Counter(props) {
    console.log('Counter');
    return (
        <h1>Counter: {props.counter}</h1>
    )
}

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count}</h1>
          <Counter counter={double} />
      </div>
  )
}

export default App;
2. 使用memo来优化Counter子组件

可以观察到，经过这一步骤优化后，只有当App组件里的count值为3和4的时候，Counter子组件才会重新渲染（控制台输出）。

import React, { useState, useMemo, memo } from 'react';

const Counter = memo(function Counter(props) {
    console.log('Counter');
    return (
        <h1>Counter: {props.counter}</h1>
    )
})

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count}</h1>
          <Counter counter={double} />
      </div>
  )
}

export default App;
3.给Counter组件传递onClick属性

尽管Counter子组件里的counter值，只会在App组件的count值为3和4的时候才会更新。但是每一次count值变化，Counter组件都会重新渲染，这是意料之外的场景。说明每一次App的变化，都会到处onClick也被连带重新渲染了。

import React, { useState, useMemo, memo } from 'react';

const Counter = memo(function Counter(props) {
    console.log('Counter');
    return (
        <h1>Counter: {props.counter}</h1>
    )
})

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

    const onClick = () => {
        console.log('click')
    }

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count}</h1>
          <Counter counter={double} onClick={onClick}/>
      </div>
  )
}

export default App;
4. 使用useMemo来让onClick不会每次都渲染

使用useMemo(() => { return onClick }, [])来包裹onClick函数，让它不会每一次都重新渲染，就只渲染一次。

可以发现优化成功了，只有当App组件里的count值为3和4的时候，Counter组件才有重新渲染。

import React, { useState, useMemo, memo } from 'react';

const Counter = memo(function Counter(props) {
    console.log('Counter');
    return (
        <h1>Counter: {props.counter}</h1>
    )
})

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

    const onClick = useMemo(() => {
        return () => {
            console.log('click')
        }
    }, [])

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1 onClick={props.onClick}>count: {count}</h1>
          <Counter counter={double} onClick={onClick}/>
      </div>
  )
}

export default App;
5. 使用useCallback来省略顶层的useMemo函数

刚刚第4点的优化中，onClick的具体优化代码为：

const onClick = useMemo(() => {
        return () => {
            console.log('click')
        }
}, [])

可以观察到这里有两层函数。

useCallback

useCallback就是useMemo可以省略一层函数的写法。
useMemo(() => fn, []) 就等于 useCallback(fn, [])。

可以观察到这里有两层函数：

const onClick = useMemo(() => {
        return () => {
            console.log('click')
        }
}, [])

使用useCallback来简写：

const onClick = useCallback(() => {
  console.log('click')
}, [])

完整代码：

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

const Counter = memo(function Counter(props) {
    console.log('Counter');
    return (
        <h1 onClick={props.onClick}>Counter: {props.counter}</h1>
    )
})

function App() {
    const [count, setCount] = useState(0);

    const double = useMemo(() => {
        return count * 2
    }, [count === 3])

    const onClick = useCallback(() => {
        console.log('click')
    }, [])

  return (
      <div>
          <button onClick={() => setCount(count + 1)}>点我加一</button>
          <h1>count: {count}</h1>
          <Counter counter={double} onClick={onClick}/>
      </div>
  )
}

export default App;
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,904评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,581评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,527评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,463评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,546评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,572评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,582评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,330评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,776评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,923评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,571评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352