React中useMemo的简单使用

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。

useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。

useMemo使用：
useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。

import React, {useState, useMemo} from 'react'export default function UseMemoTest() {const [text, setText] = useState('')const [data, setData] = useState([{id: 1, name: 'test1111'},{id: 2, name: 'test222'},{id: 3, name: 'test334'},{id: 4, name: 'test444'},])const handleChange = (e) => {setText(e.target.value);}const getList = useMemo(() => {return data.filter(item => {if(item.name.includes(text)) {return item}});}, [text]);return (<div style={{marginTop: 20}}><input type="text" onChange={(e) => handleChange(e)}/>{getList.map(item => <div key={item.id}>{item.name}</div>)}      </div>)
}

React中useMemo的简单使用相关推荐

react中试用leaflet简单起步
写在最前边,前不久的一个项目中要做一个地图的数据可视化需求.项目中用到了 Leaflet.项目到现在功能已经基本实现,现在写下来做一下记录.Demo是用 create-react-app 搭建的.源码 ...
React中useMemo函数【调优的不二选则】的使用及一看就会的案例（个人觉得很详细了，而且包含了很多知识点呀）
useMemo 记忆组件: 如果你学过vue,应该知道computed(计算属性)吧,没错,它就是和计算属性一样一样滴功能.但是其原理是:它会执行第一个函数并将函数执行的结果返回给你.那为什么它是调优 ...
如何在react中简单应用echart，及echart特性
一分钟学会在react中简单应用echart 1.首先安装echart.echarts-for-react npm install echarts --save npm install --save ...
【TS学习和在react中的简单应用】
TS学习和在react中的简单应用 1. ts基础 1.1 ts基本类型 1.2 数组 1.3 对象 1.4 函数 1.5 class类 1.6 枚举enum 1.7 typeof 1.8 TS中的泛 ...
React中的Hooks详解
1.概述 React官方网站原文:Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能. 我总结了下使用Hooks的理由: 1.解决class中的代 ...
react中的useRef
前言 react hooks 是 React 16.8 的新增特性. 它可以让我们在函数组件中使用 state .生命周期以及其他 react特性,而不仅限于 class 组件.react hooks ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
react构建淘票票webapp，及react与vue的简单比较。
前言前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...

React中useMemo的简单使用

React中useMemo的简单使用相关推荐

最新文章

热门文章