React函数式组件值之useMemo()和useCallback()
2023-09-11 14:22:17 时间
一、基础用法
- useMemo可以保证依赖的值未发生改变的时候,不触发值改变。
- useCallback可以保证依赖的值未发生改变的时候,不触发函数引用的改变。
1 //当count变化,sum的值会改变
2 const sum = useMemo(() => {
3 return count + 1;
4 }, [count]);
5 //当count变化,getSum函数会改变
6 const getSum = useMemo(() => {
7 return count + 1;
8 }, [count]);
第二参数含义:
- 不传数组,每次更新都会重新计算
- 空数组,只会计算一次
- 依赖对应的值,当对应的值发生变化时,才会重新计算
二、应用场景
React的函数式组件在直接使用useState或使用useEffect间接调用useState时,会导致整个函数的重新执行。其中,函数组件包裹的所有的变量、常量、函数都会被重新初始化,相当于props整体更新,所有组件内的子组件重新绘制。但并不是每个子组件都有必要重绘,有的根本没有变化,这时,就需要使用useMemo和useCallback保证函数组件内常量与函数的唯一性。
1 import React, { useState, memo, useMemo, useCallback } from 'react'
2 const Child = memo((props) => {
3 console.log(props);
4 return (
5 <div>
6 <input type="text" onChange={props.onChange}/>
7 </div>
8 )
9 })
10 const Parent = () => {
11 const [count, setCount] = useState(0)
12 const [text, setText] = useState('')
13 const handleOnChange = useCallback((e) => {
14 setText(e.target.value)
15 },[])
16 return (
17 <div>
18 <div>count: {count}</div>
19 <div>text: {text}</div>
20 <button onClick={() => {
21 setCount(count + 1)
22 }}>+1</button>
23 <Child onChange={handleOnChange} />
24 </div>
25 )
26 }
27 function App() {
28 return <div><Parent /></div>
29 }
30 export default App
上面代码中,handleOnChange被缓存了下来,尽管父组件更新了,但是拿到的handleOnChange还是同一个,对比useMemo,useMemo缓存的是一个值,useCallback缓存的是一个函数,是对一个单独的props值进行缓存,memo缓存的是组件本身,是站在全局的角度进行优化。
需要注意的是,useMemo 会在渲染的时候执行,而不是渲染之后执行,这一点和 useEffect 有区别,所以 useMemo 不建议有 副作用相关的逻辑。
useMemo根据依赖的值计算出结果,当依赖的值未发生改变的时候,不触发状态改变。一般开发,在向子组件传递函数props时,每次 render 都会创建新函数,导致子组件不必要的渲染,浪费性能,这个时候,就是 useCallback 的用武之地了,useCallback 可以保证,无论 render 多少次,我们的函数都是同一个函数,减小不断创建的开销。
相关文章
- React组件属性部类(propTypes)校验
- 微信小程序 - 自定义swiper dots样式(非组件)
- react 组件模板
- react 组件之间传值
- vue 父组件向子组件传值,子组件接收不到问题
- react发布一个组件库 系列篇(二)
- react发布一个组件库 系列篇(一)
- React -- State Hook 详细介绍(函数组件也可以使用state了)
- SwiftUI WWDC21 新组件之 01 AsyncImage 异步加载和显示图像的视图
- SwiftUI 布局之alignmentGuide如何让一个组件居中另外一个组件向上偏移(教程含源码)
- 一个基于MVVM的TableView组件化实现方案
- react函数式组件(非路由组件)实现路由跳转
- react使用antd组件递归实现左侧菜单导航树
- React动画库之react-transition-group(入场enter、出场exit、初始化appear)
- vue3组件基础,组件引用与使用、向子组件传递数据与事件prop、emit
- React之组件之间的通讯
- 浅析Vue CompositionAPI和React Hooks对比:hook的意义、两者差别(原理-链表/Proxy、代码执行-每次渲染都执行/组件创建时运行、声明响应式状态、如何跟踪依赖、生命周期、自定义hook、Ref获取元素、计算属性附加函数、Context和provide/inject、在渲染上下文中暴露值)
- uni-app开发注意事项:Unexpected end of JSON input、static目录注意事项、模板内引入静态资源、JS文件引入问题、运行环境判断、easycom组件模式
- 晶科能源向智利1.7MW光伏电站供应组件
- React函数式组件值之useContext()和useReducer()
- React:声明组件的方式,看这篇就够了
- react声明组件时,第一个字母必须大写,为什么呢
- React组件
- React 的antd-mobile 组件库,嵌套路由