React Hooks ---useMemo

useMemo

下面我们通过一个实例,来理解下 useMemo的用法。

  • 父组件
function App() {
  const [name, setName] = useState('名称')
  const [content,setContent] = useState('内容')
  return (
      <>
        <button onClick={() => setName(new Date().getTime())}>name</button>
        <button onClick={() => setContent(new Date().getTime())}>content</button>
        <Button name={name}>{content}</Button>
      </>
  )
}
  • 子组件
function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改变name的方法'
  }

  const otherName =  changeName(name)
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}

熟悉react的同学可以很显然的看出,当我们点击父组件的按钮的时候,子组件的name和children都会发生变化。

注意我们打印console.log的方法。

不管我们是改变name或者content的值,我们发现 changeName的方法都会被调用。
是不是意味着 我们本来只想修改content的值,但是由于name并没有发生变化,所以无需执行对应的changeName方法。但是发现他却执行了。 这是不是就意味着性能的损耗,做了无用功。

下面我们使用useMemo进行优化

  • 优化之后的子组件
function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改变name的方法'
  }

const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}

export default Button

这个时候我们点击 改变content值的按钮,发现changeName 并没有被调用。
但是点击改变name值按钮的时候,changeName被调用了。
所以我们可以使用useMemo方法 避免无用方法的调用,当然一般我们changName里面可能会使用useState来改变state的值,那是不是就避免了组件的二次渲染。
达到了优化性能的目的


流年的樱花逝
一个28岁转行程序员的奋斗之路

三人行,必有我师

2k 声望
63 粉丝
0 条评论
推荐阅读
uniapp中使用echarts 时在h5中 tooltips无效的解决办法
版本信息echarts:5.1.2uniapp:3.1.8原因:echarts 引入的时候,会优先判断当前的环境。uniapp的又一个全局变量就叫做wx。导致这里的判断直接走第一个。解决办法:在main.js中 {代码...} 直接将wx重新赋值。

腹中有书气自华1阅读 3.5k评论 1

你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.3k

封面图
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 7.6k评论 3

封面图
第九期:前端九条启发分享
下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。

lulu_up8阅读 884

Next.js-集成状态管理器共享access token以及刷新access token解决方案
SSR和SPA最大的区别就是SSR会区分客户端Client和服务端Server,并且SSR之间只能通过cookie才能在Client和Server之间通信,例如:token信息,以往我们在SPA项目中是使用localStorage或者sessionStorage来存储,但...

Awbeci4阅读 9.1k评论 2

Rollup 基本概念及使用
Rollup是一款基于ESModule模块规范实现的JavaScript打包工具,在前端社区中赫赫有名,同时也在Vite的架构体系中发挥着重要作用。不仅是Vite生产环境下的打包工具,其插件机制也被Vite所兼容,可以说是Vite的构建...

xiangzhihong4阅读 900

不数不知道,React已经有22个hook了
大家好,我卡颂。5月30日刚好是React10周年纪念日。我顺手拉了下React最新代码,这一看不要紧,居然已经有22个hook了。其中:react包导出了21个react-dom包导出了1个(useFormStatus)本文会从React这些年发展脉...

卡颂6阅读 785

封面图

三人行,必有我师

2k 声望
63 粉丝
宣传栏