react 对象渲染_不要过度使用React.useCallback()
我博客的一位读者联系到我,提出了一个有趣的问题。
他说,他的队友不管在什么情况下,都会把每一个回调函数封装在 useCallback() 里面。
import React, { useCallback } from 'react';function MyComponent() { const handleClick = useCallback(() => { // handle the click event }, []); return ;}
这是他的队友的理由:“每个回调函数都应该被记住,以防止使用回调函数的子组件被无用地重新渲染”
这句话与事实相去甚远,此外,useCallback() 的这种用法会使组件变慢,从而损害性能。
在本文中,我将解释如何正确使用 useCallback()。
1.了解函数相等性检查
在深入研究 useCallback() 用法之前,让我们区分一下钩子要解决的问题:函数相等性检查。
让我们定义一个名为 factory() 的函数,该函数返回函数:
function factory() { return (a, b) => a + b;}const sum1 = factory();const sum2 = factory();sum1(1, 2); // => 3sum2(1, 2); // => 3sum1 === sum2; // => falsesum1 === sum1; // => true
sum1 和 sum2 是将两个数字相加的函数,它们是由 factory() 函数创建的。
函数 sum1 和 sum2 共享相同的代码源,但是它们是不同的对象,比较它们 sum1 === sum2 结果为 false。
这就是JavaScript的工作方式,对象(包括函数对象)仅等于其自身。
2.useCallback() 的目的
共享相同代码的不同函数实例往往在React组件内部创建。
当 React 组件主体创建一个函数(例如回调或事件处理程序)时,这个函数会在每次渲染时重新创建。
import React from 'react';function MyComponent() { // handleClick在每次渲染时重新创建 const handleClick = () => { console.log('Clicked!'); }; // ...}
handleClick 在 MyComponent 的每次渲染中都是一个不同的函数对象。
因为内联函数很“便宜”,所以在每次渲染时重新创建函数不是问题,每个组件有几个内联函数是可以接受的。
然而,在某些情况下,你需要保留一个函数的一个实例:
- 包装在 React.memo()(或 shouldComponentUpdate )中的组件接受回调prop。
- 当函数用作其他hooks的依赖项时 useEffect(...,[callback])
这就是当 useCallback(callbackFun, deps) 帮助你的情况:给出相同的依赖值 deps,hook在两次渲染之间返回相同的函数实例。
import React, { useCallback } from 'react';function MyComponent() { // handleClick是同一个函数对象 const handleClick = useCallback(() => { console.log('Clicked!'); }, []); // ...}
handleClick 变量将在不同的 MyComponent 的渲染之间始终拥有相同的回调函数对象。
3.一个好用例
想象一下,你有一个呈现大的项目列表组件:
import React from 'react';function MyBigList({ items, handleClick }) { const map = (item, index) => (
handleClick(index)}>{item}
; ); return
{items.map(map)}
;}export const MyBigList = React.memo(MyBigList);
MyBigList 渲染了一个项目列表,要知道这个列表可能很大,可能有几百个项目。要保留重新渲染的列表,可以将其封装到 React.memo 中。
单击一个项目时,MyBigList 的父组件需要提供项目列表和处理程序功能。
import React from 'react';import useSearch from './fetch-items';function MyParent({ term }) { const handleClick = useCallback((item) => { console.log('You clicked ', item); }, [term]); const items = useSearch(term); return ( );}
handleClick 回调由 useCallback() 记忆。只要 term 变量保持不变,useCallback() 就会返回相同的函数对象。
即使由于某些原因重新启用了 MyParent 组件,handleClick 仍保持不变,并且不会破坏 MyBigList的记忆。
4.一个“坏”的用例
让我们回顾一下本文简介中的示例:
import React, { useCallback } from 'react';function MyComponent() { const handleClick = useCallback(() => { // handle the click event }, []); return ;}function MyChild ({ onClick }) { return I am a child;}
记住 handleClick 是否有意义?
没有,因为调用 useCallback() 需要很多工作,每次渲染 MyComponent 时,都会调用 useCallback() Hook。
从内部来讲,React确保返回相同的对象函数。即便如此,内联函数仍然在每次渲染时创建,useCallback() 只是跳过了它。
即使用 useCallback() 返回相同的函数实例,也不会带来任何好处,因为优化要比没有优化花费更多。
不要忘记增加的代码复杂性,你必须确保 useCallback() 的 deps 与您在 memoized 回调中使用的 deps 保持同步。
只需接受每次重新渲染时创建新的函数:
import React, { useCallback } from 'react';function MyComponent() { const handleClick = () => { // handle the click event }; return ;}function MyChild ({ onClick }) { return I am a child;}
5.总结
任何优化都会增加复杂性,任何过早添加的优化都会带来风险,因为优化后的代码可能会多次更改。
如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。
私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!
#React# #前端开发# #JavaScript#
react 对象渲染_不要过度使用React.useCallback()相关推荐
- 不挂载 组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者:天泽 转发链接:https://www.zoo.team/article/react-render 性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配 ...
- react 服务器端渲染_服务器端渲染React应用程序的动手指南
react 服务器端渲染 In the previous article, we described how to make a production build and deploy it to a ...
- react 对象克隆_如何使用React&GraphQL(Dune World Edition)创建全栈Yelp克隆
react 对象克隆 I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obli ...
- 使用react的好处_聊一聊我对 React Context 的理解以及应用
前言 Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有. 在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API ...
- react全局方法_前端面试题 ---react
高阶组件相关 什么是高阶组件,它有哪些运用? 高阶组件就是一个函数,接收一个组件,经过处理后返回后的新的组件: 高阶组件,不是真正意义上的组件,其实是一种模式: 可以对逻辑代码进行抽离,或者添加某个共 ...
- react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
- react hooks使用_为什么要使用React Hooks?
react hooks使用 The first thing you should do whenever you're about to learn something new is ask your ...
- react hooks使用_如何开始使用React Hooks:受控表格
react hooks使用 by Kevin Okeh 由Kevin Okeh 如何开始使用React Hooks:受控表格 (How to Get Started With React Hooks: ...
- 创建react应用程序_使用SpringWebFlux的React式Web应用程序
创建react应用程序 1.React式编程简介 React式编程是为具有以下特征的应用程序创造的术语: 非阻塞应用 事件驱动和异步 需要少量线程来垂直扩展(即在JVM中) 就像面向对象的编程,函数式 ...
最新文章
- python基础(迭代器,生成器,装饰器)
- [置顶] 当我拿车钥匙的时候,刚交的女朋友跑了。。。
- TabLayout+Viewpager+Fragment实现分页滚动
- 编程理论:多态,继承,和开闭原则
- 【超详细】一文学会链表解题(建议收藏!)
- 【Linux】一步一步学Linux——reset命令(268)
- 如何优雅地本地化构建Mybatis源码
- 16 bit float 存储_浅谈float和double
- 如何在麦田拍出小清新?
- 计算机处理答题卡原理,中高考答题卡扫描进电脑原来是这样的!难怪要被多扣分了(附卷面高分八法)...
- android远程桌面闪退,win7系统连接远程桌面出现闪退问题的两种解决方法详细教程...
- thon中的全局变量
- 2021年2月程序员工资统计,平均15144元
- Fatal signal 11 (SIGSEGV) at 0x00000004 (code=1), thread 261 (servicemanager)错误
- 推荐一个视频网站-播布客
- 进不了BIOS,电脑开机黑屏
- 故障电路指示灯行业研究及十四五规划分析报告
- keil5的暗色配色方案
- 《MATLAB 神经网络43个案例分析》:第3章 遗传算法优化BP神经网络——非线性函数拟合
- 【Practical】蒙特卡罗法及其应用
热门文章
- c mysql清理日志文件_MySQL 一般查询日志或者慢查询日志历史数据的清理
- python基础教程电子版-Python基础教程(第2版 修订版) pdf
- python免费课程400节-Python2 教程
- python爬虫-Python 爬虫介绍
- python安卓下载-QPython下载
- 本地语音识别_语音 识别_语音识别 - 云+社区 - 腾讯云
- 百度语音识别技术突破 巨头崛起
- 语音识别HCLG解码
- 什么是pdi检测_汽车pdi检测是什么?如何知道新车做没做pdi
- java8 foreach 伟参_【java8】为java8的foreach正名