useMemo 记忆组件：

如果你学过vue，应该知道computed（计算属性）吧，没错，它就是和计算属性一样一样滴功能。但是其原理是：它会执行第一个函数并将函数执行的结果返回给你。那为什么它是调优的不二选则呢，因为它具有缓存功能，当页面其它组件或同一组件下其它数据发送变化时，组件会进行渲染，而它不会再渲染了。

这里以在同一组件下为例进行演示：

效果图：

应用场景：

当后端返回过来的数据（的）结构过于复杂时，可以把深层次的数据计算出来，再进行渲染，不然，你会疯掉的。

直接上案例吧：

1.在项目pubic目录下新建test.json文件

文件内容：

{"data": {"list": [{"id" :1,"name" :"abc"},{"id" :2,"name" :"Abc"},{"id" :3,"name" :"jjAb"},{"id" :4,"name" :"udeca"},{"id" :5,"name" :"loUd"},{"id" :6,"name" :"lkMu"},{"id" :7,"name" :"wire"},{"id" :8,"name" :"ercty"},{"id" :9,"name" :"hJkgl"},{"id" :10,"name" :"sDfge"},{"id" :11,"name" :"hnegs"},{"id" :12,"name" :"NJuIk"},{"id" :13,"name" :"WyJnS"},{"id" :14,"name" :"PKenJK"},{"id" :15,"name" :"IjEngae"},{"id" :16,"name" :"Plejifsd"},{"id" :17,"name" :"IkPo"},{"id" :18,"name" :"Hgji"},{"id" :19,"name" :"BnMl"},{"id" :20,"name" :"Zxcv"}]}
}

2.运行Demo08案例

代码如下：

import React, { useEffect, useState, useMemo } from 'react'
import axios from 'axios'
export default function Demo08() {const [list, setlist] = useState([])// useState:是具有缓存功能的const [text, settext] = useState('')const [name, setname] = useState('夏天')useEffect(() => {axios.get('/test2.json').then(res => {// 成功的回调console.log(res.data.data.list)setlist(res.data.data.list)}).catch(err => {// 失败的回调console.log('失败了呀')})return () => {}}, [])// []:这里加list会导致一直发请求// 原因：因为刚开始list为空，请求回来后会导致组件重新渲染，没问题// 但是，它发现list数据变了，便会再次组件渲染，如此便形成了一直发请求// 检索函数 --- 忽略大小写const computedList = useMemo(() => list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())), [list, text])// useMemo:相当于Vue的计算属性，第一个参数():写自己的逻辑功能代码，这里以检索为例，第二个参数[],监听状态值的变化return (<div><div style={{ float: 'left', marginRight: '100px' }}>{/* 功能一：查询 */}{/* {text} */}搜索框：<input type="text" value={text} onChange={(e) => settext(e.target.value)} /><ul>{computedList.map(item =><li key={item.id}>{item.name}</li>)}</ul></div><div >{/* 功能二：修改名字 */}<p>{name}</p><button onClick={() => {name.includes('夏天') ? setname('冬天') : setname('夏天')}}>点我换季节</button></div></div>)
}

3.运行结果

自己执行yarn start就好了

总结：

useEffect函数的[ ]这里加list会导致一直发请求

原因：因为刚开始list为空，请求回来后会导致组件重新渲染，没问题。但是，它发现list数据变了，便会再次组件渲染，如此便形成了一直发请求。[ ]什么都不写就表示组件刚加载时只执行一次。

useMemo函数的[ ]这里必须要加参数，因为它可以检测状态值list与text是否发生变化，没变化则走缓存，反之，重新计算并渲染。

React中useMemo函数【调优的不二选则】的使用及一看就会的案例（个人觉得很详细了，而且包含了很多知识点呀）相关推荐

ML之XGBoost：XGBoost参数调优的优秀外文翻译—《XGBoost中的参数调优完整指南(带python中的代码)》(三)
ML之XGBoost:XGBoost参数调优的优秀外文翻译-<XGBoost中的参数调优完整指南(带python中的代码)>(三) 目录 3. 参数微调案例/Parameter Tunin ...
ML之XGBoost：XGBoost参数调优的优秀外文翻译—《XGBoost中的参数调优完整指南(带python中的代码)》(二)
ML之XGBoost:XGBoost参数调优的优秀外文翻译-<XGBoost中的参数调优完整指南(带python中的代码)>(二) 目录 2. xgboost参数/XGBoost Para ...
(三)大话深度学习编译器中的自动调优·Empirical Search
前面的第一篇"(一)大话深度学习编译器中的自动调优·前言"与第二篇"(二)大话深度学习编译器中的自动调优·DSL与IR"分别介绍了背景与一些相关概念,这第三篇我 ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
ML之XGBoost：XGBoost参数调优的优秀外文翻译—《XGBoost中的参数调优完整指南(带python中的代码)》(四)
ML之XGBoost:XGBoost参数调优的优秀外文翻译-<XGBoost中的参数调优完整指南(带python中的代码)>(四) 目录 Step 3: Tune gamma步骤3:伽马微 ...
ML之XGBoost：XGBoost参数调优的优秀外文翻译—《XGBoost中的参数调优完整指南(带python中的代码)》(一)
ML之XGBoost:XGBoost参数调优的优秀外文翻译-<XGBoost中的参数调优完整指南(带python中的代码)>(一) 目录概述/Overview 介绍/Introducti ...
Java 9 中的 GC 调优基础
转载自 Java 9 中的 GC 调优基础在经过了几次跳票之后,Java 9终于在原计划日期的整整一年之后发布了正式版.Java 9引入了很多新的特性,除了闪瞎眼的Module System和R ...
Python的数据分析中超参数调优方法：网格搜索
[小白从小学Python.C.Java] [Python全国计算机等级考试] [Python数据分析考试必会题] ● 标题与摘要 Python的数据分析中超参数调优方法:网格搜索 ● 选择题以下说 ...
React中useMemo的简单使用
useMemo主要用来解决使用React hooks产生的无用渲染的性能问题,用来做缓存用. useMemo使用场景,比如有两个变量(依赖项),只需要在其中一个变量变化时发生变化,否则拿缓存的值:或者 ...

React中useMemo函数【调优的不二选则】的使用及一看就会的案例（个人觉得很详细了，而且包含了很多知识点呀）