React Hook之useCallback 性能优化

这篇具有很好参考价值的文章主要介绍了React Hook之useCallback 性能优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上文 对比之前的组件优化说明React.memo的作用我们说了 React.memo的妙用 但是 它却并非万能
我们来看这个情况
我们子组件代码编写如下

import React from "react";

const ChildComponent = ({ dom1funt }) => {
  console.log("ChildComponent 被重新渲染");
  return (
    <div>
      <button onClick={dom1funt}>dom1funt</button>
    </div>
  );
};

export default React.memo(ChildComponent)

这里 我们接收了父组件 props中的一个 dom1funt 函数
然后点击dom1funt按钮 触发这个dom1funt

然后 父组件代码编写如下

import React, { useState } from 'react';
import Dom1 from './components/dom1';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const memoizedHandleClick = () => {
    console.log('按钮被点击了');
    setCount(count + 1);
  };

  const dom1funt = () => {
    console.log('子组件函数');
  }

  return (
    <div>
      <button onClick={memoizedHandleClick}>{ count }</button>
      <Dom1 dom1funt={dom1funt} />
    </div>
  );
}

export default ParentComponent;

父组件 我们定义了这个传给子组件的 dom1funt
但是它不是主角 我们点击count所在的按钮触发的 memoizedHandleClick才是
我们运行项目
React Hook之useCallback 性能优化
然后 我们疯狂点击这个 按钮
React Hook之useCallback 性能优化
我们可以看到 memoizedHandleClick 触发了 但是 从输出 ChildComponent 被重新渲染我 我们就可以看出 这个子组件 一直再被重新渲染 命名套了React.memo

React.memo只是能让你在没用父组件东西时不参与重新渲染 但是我们用了父组件的 dom1funt
但是还是问题啊 我们又不用memoizedHandleClick
也不需要setCount和count 那子组件凭什么参与这种渲染

那么 我们可以这样写 将父组件代码修改如下

import React, { useState, useCallback } from 'react';
import Dom1 from './components/dom1';

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const memoizedHandleClick = () => {
    console.log('按钮被点击了');
    setCount(count + 1);
  };

  const dom1funt = useCallback(() => {
    console.log('子组件函数');
  }, []);

  return (
    <div>
      <button onClick={memoizedHandleClick}>{ count }</button>
      <Dom1 dom1funt={dom1funt} />
    </div>
  );
}

export default ParentComponent;

我们给父组件套上了 useCallback
再次 疯狂点击 count 对应的按钮
React Hook之useCallback 性能优化
这次 我们的子组件就不会一直重新渲染了
这就是useCallback作用中的性能优化文章来源地址https://www.toymoban.com/news/detail-502326.html

到了这里,关于React Hook之useCallback 性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React组件设计之性能优化篇

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:空山 由于笔者最近在开发中遇到了一个重复渲染导致子组件状态值丢失的问题,因此关于性能优化做了以下的分析,欢迎大

    2024年02月16日
    浏览(47)
  • 性能优化-react路由懒加载和组件懒加载

    随着项目越来越大,打包后的包体积也越来越大,严重影响了首屏加载速度,需要对路由和组件做懒加载处理 主要用到了react中的lazy和Suspense。 废话不多说,直接上干货 核心代码 配合路由表的完整例子 效果 组件加载前 组件懒加载后 这样就会大大加快首屏加载速度

    2024年02月14日
    浏览(39)
  • ChatGPT vs. 之前版本:性能与表现的对比

    🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍》学会IDEA常用操作,工作效率翻倍~💐 🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅,敬

    2024年02月16日
    浏览(51)
  • 前端工程化实战:React 模块化开发、性能优化和组件化实践

    前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。 模块化开发 在 React 中实现模块化开

    2023年04月10日
    浏览(72)
  • React---函数组件的常用hook

    2024年01月19日
    浏览(40)
  • react使用hook封装一个tab组件

    2024年02月09日
    浏览(47)
  • react Hook+antd封装一个优雅的弹窗组件

    前言 在之前学vue2的时候封装过一个全局的弹窗组件,可以全局任意地方通过this调用,这次大创项目是用react技术栈,看了一下项目需求,突然发现弹窗还是比较多的,主要分为基础的弹窗以及form表单式的弹窗,如果只是无脑的去写代码,那些项目也没啥必要了。正好react和

    2024年02月13日
    浏览(41)
  • React Hook入门小案例 在函数式组件中使用state响应式数据

    Hook是react 16.8 新增的特性 是希望在不编写 class的情况下 去操作state和其他react特性 Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐 我们还是先创建一个普通的react项目 我们之前写一个react组件可以这样写 简单说 就是声明一个类对象 然后在里面 写组

    2024年02月09日
    浏览(54)
  • React与Vue性能对比

    React 和 Vue 是目前前端开发中最流行的两个框架,它们在性能方面有一些不同。下面是一些关于这两个框架性能的说明和代码示例。 React React 的虚拟 DOM 使其具有很高的性能。React 的核心思想是将组件视为虚拟 DOM 的树形结构,当数据发生变化时,React 会计算出最小化的差异,

    2024年02月01日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包