Hook改变的React Component写法思路(2) - useCallback和useMemo

最新推荐文章于 2024-09-19 10:28:08 发布

杰尼js

最新推荐文章于 2024-09-19 10:28:08 发布

阅读量4.8k

点赞数

分类专栏：学习笔记文章标签： Hook React 钩子 useCallback useMemo

本文链接：https://blog.csdn.net/jennieji/article/details/90141385

版权

本文探讨如何通过React的useCallback和useMemo Hook优化Component性能。useCallback避免了匿名函数重复声明导致的不必要的渲染，而useMemo则用于缓存计算值，减少重复计算。详细解释了这两个Hook的使用场景和比较参数的重要性。

摘要由CSDN通过智能技术生成

文章目录

- useCallback把匿名回调“存”起来
- useMemo保存一些计算值

useCallback把匿名回调“存”起来

在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。

在Class component当中我们通常将回调函数声明为类成员：

class MyComponent extends React.Component {
   
    constructor(props) {
   
        super(props);
        this.clickCallback = this.clickCallback.bind(this);
    }
    clickCallback() {
   
        // ...
    }
    render() {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

杰尼js

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Hook 改变的 React Component 写法思路(1) - useState和useEffect

前端乱谈

04-28

7085

Hook 改变的 React Component 写法思路 React hook 在酝酿近一年后，终于在16.8稳定版中重磅推出。在此前后FB的Dan大神劳心劳力地几乎每天在Twitter上给大家洗脑宣传。那它究竟跟之前的React应用相比有什么改变？前提是先要理解Memoize Memoize是贯穿hook用法的一个非常重要的概念，理解它是正确使用hook的基石。 Memoize基本上就是把...

Hook改变的React Component写法思路(4) - useReducer

前端乱谈

05-13

817

其实一开始看到useReducer的时候，还以为它跟react的好伙伴redux有什么关系。然而也就是借鉴了redux的设计模式的状态操作工具而已。目前使用Redux的小伙伴们可能还需要用原来的react-redux提供的connect HOC一段时间。尽管facebook已经在做相关的hook，目前还处于不稳定的状态，使用后果自负（项目地址：https://github.com/faceboo...

1 条评论您还未登录，请先登录后发表或查看评论

react-render-callback：渲染属性助手来渲染任何东西（函数，组件，元素等）

02-16

React渲染回调 render-prop助手来渲染任何东西（函数，组件，元素等）问题您希望您的组件支持具有不同类型值的，例如，（组件注入）或仅是简单的react元素。这个解决方案 react-render-callback使您无需检测组件正在处理的类型： import React from 'react' import renderCallback from 'react-render-callback' class Component from React . Component { state = { } render ( ) { // can be any prop like render, component, renderHeader, ... // children may be a function, a component, an e

React：useCallback

臧小川的博客

10-12

404

import { useState, useCallback, Fragment } from 'react'; import Child from './Child' const index = () => { const [count, setCount] = useState(1); const [content, setContent] = useState('Lee'); // 修改input的 `content`值 const intChang = (event)

react hooks--useCallback

最新发布

小白小白从不日别的博客

09-19

1557

useCallback缓存的是一个函数，主要用于性能优化!!!

react中useCallback的使用

qq_32094783的博客

08-05

4652

1、参数：callback(函数），要做的事放在这个函数里面 desp:要做的事需要引入的外部参数或依赖参数例：const handleChildrenCallback=useCallback(()=>{ handleChildren();//要做的事 }，[]);//不需要参数就不传 2、返回值...

React Hooks大全—useCallback

CreatorRay的博客

01-07

1472

在本文中，我们将重点介绍一个React常用的内置Hook，即useCallback。useCallback可以让我们缓存函数，避免因为函数引用的变化而导致不必要的子组件重渲染。我们讲解它的基本使用、实现原理、与useMemo的区别、最佳实践等。

React -- useCallback

weixin_45269534的博客

07-03

995

react -- useCallback

React Hook中的useCallback和useMemo：优化性能

在React Hook中，有两个常用的Hook函数分别是`useCallback`和`useMemo`。这两个Hook函数都有着优化性能的作用，能够减少组件的重新渲染和计算开销。 ## 1.2 useCallback和useMemo的作用和优势 - **`useCallback`的...

React Hook和React-router的基本使用

x94410891的博客

07-29

984

目录Hook好处:Hook可以解决的问题:目前官网提供的Hook APIuseStateuseEffectuseRef自定义hook1. 创建自定义hook2.使用自定义hookreact-router基本使用1.安装2.导入3.使用总结: Hook Hook 是 React 16.8 的新增特性,React 里面的 Hook 是一个函数. 好处: 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook可以解决的问题: 避免地狱式嵌套，可读性提高。函数式组件，

React-useCallback

qq_64067728的博客

10-14

530

useCallback也是一样的。1.我们在定义函数组件的时候时常在函数体内定义一些内嵌函数，这些内嵌函数会在组件每次重新渲染的时候被重新定义，如果它们作为props传递给了子组件的话，即使其它props的值没有发生变化，它都会使子组件重新渲染，而无用的组件重渲染可能会产生一些性能问题。简而言之useCallback就是把我们在函数组件内部定义的函数保存起来,当组件重新渲染时还是使用之前的,就不会被重新定义一次。当前定义的函数，并在下次组件渲染的时候返回之前定义的函数而不是使用新定义的函数。

react 之 useCallback

Jasmin博客

02-02

562

useCallback的使用方法，useCallback也是用来缓存的，只不过是用于做函数缓存。

React中的useCallback

qq_53742640的博客

07-07

1099

是一个强大的Hook，用于优化React应用的性能，通过避免不必要的函数重新创建和子组件渲染。使用时，应合理选择依赖项，以确保函数在需要时更新。与useMemo相比，专注于函数记忆化，而useMemo则用于计算结果的记忆化。理解两者的区别和适用场景，可以帮助开发者更有效地优化React应用。useMemo和memo 介绍React中的useMemo和memo-CSDN博客。

react useCallback的用法