React.memo每天一个小知识,有例子

这篇具有很好参考价值的文章主要介绍了React.memo每天一个小知识,有例子。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

react的子组件props接收父组件的属性
运用场景:子组件如果接收多个参数,父组件传的值有变化,就更新(多次请求接口,再有图片请求的时候,费劲),比如打开弹出框,open就是true/false,但是你只想在单据不一样的时候更新,就需要自定义逻辑,
用了React.memo回调函数判断。
prev.id === next.id 上一个id和下一个id不相等,子组件才更新
写法:

import React from 'react';

interface ListProps {
    id: number;
    list: string[];
    open?: number; // ?可选参数的意思
  }
  
  const List = (props:ListProps) => {
    const {id, list, open} = props;
    console.log('open', open)
    return <>
    <div>单据号:{id}</div>


    <ul>
      {list.map((it, index) => <li key={index}>{it}</li>)}
    </ul>
    </>
  }

  // true 不更新 
  // prev props上一个值
  // next props下一个值
  // prev.id === next.id 上一个id和下一个id不相等,子组件才更新
function checkItemEqual(prev, next) {
    return  prev.id === next.id
  }

  export default React.memo(List, checkItemEqual);

Modal组件,如果不管props参数,每次点击都要新的请求接口渲染的话,modal加destroyOnClose属性即可文章来源地址https://www.toymoban.com/news/detail-805398.html

到了这里,关于React.memo每天一个小知识,有例子的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • React.memo、shouldComponentUpdate、PureComponent的基本使用

    当我们组件内部有大量的计算是,避免组件内部进行不必要的重新渲染,使用React.memo进行缓存组件,避免不必要的重新渲染 React.memo 是用来判断是否需要重新渲染组件,和 shouldComponentUpdate 的区别是 shouldComponentUpdate 用于class组件方式,而 React.memo 用于 hooks 方式 语法 React.me

    2024年02月06日
    浏览(37)
  • 【1024用代码改变世界】useMemo 和 useCallback|React.memo使用场景

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 R e a c t / 小程序 🔥,中间穿插了一些基础知识的回顾 🌈博客主

    2024年02月02日
    浏览(51)
  • React Native Ref转发/Memo缓存/HOC高阶组件/Context上下文

    1、使用自定义组件时,实现外层组件对原始组件(TextInput)的操作 外层组件使用 ref 属性 子组件使用 forwardRef 包裹 2、函数式组件对外暴露实例方法(cusomFocus) 子组件 父组件如图一所示 1 、 避免多余渲染 问题:每次点击按钮都会导致 InfoView 组件发生重绘,即使每次 setI

    2024年01月21日
    浏览(51)
  • react学习(一)之初始化一个react项目

    React 是一个用于构建用户界面(UI)的 JavaScript 库,用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件 。从 web 端网站到移动端应用,屏幕上的所有内容都可以被分解成组件,即,可由react构建。 A JAVASCRIPT LIBRARY FOR BUILDING

    2024年04月26日
    浏览(40)
  • 【React学习】—类的基本知识(五)

    类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定的属性才写。 如果A类继承了B类,且A类写了构造器,那么A类构造器中的super是必须要调用的 类中定义的方法,都还是放在了类的原型对象上,供实例去使用

    2024年02月13日
    浏览(47)
  • 学习react,复制一个civitai-更新2

    耗时一个礼拜左右,增加了个新界面:模型图片详情界面。 看看效果图吧: 操作:在模型详情界面点击一个图片,就能到图片详情界面 总的来说,跟Civitai官网是一样的操作,只不过数据没人家的丰富。 返回back上一个界面 监听键盘ESC,用户按下,关闭界面 更新路由参数i

    2024年02月16日
    浏览(46)
  • 学习react,复制一个civitai(C站)-更新3

    优化了一下加载速度 图片列表 初步更新了199张图片,大部分都有stable diffusion 的prompts。 可以直接复制到AI绘画里面使用。 先来看看效果图吧: 我还是挺喜欢这种砌砖流布局 同样使用了砌墙瀑布流布局:masonry js 安装方法 由于我只是浅浅的使用了一下,具体使用方法,请自行

    2024年02月17日
    浏览(26)
  • 【前端知识】React 基础巩固(四十二)——React Hooks的介绍

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件 VS 函数式组件: class的优势: class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时

    2024年02月14日
    浏览(64)
  • 每天一个知识点 - 了解和使用super关键字

    super是一个,super和this很类似 可以使用 super() 函数访问父类的构造函数,从而委托父类完成一些初始化的工作 如果子类重写了父类的中某个方法的实现,可以通过使用 super 来引用父类的方法实现        super( )函数是用于调用父类的一个方法,指向了当前对象自

    2024年02月21日
    浏览(50)
  • 【前端知识】React 基础巩固(二十三)——React 性能优化 SCU相关

    React 的渲染流程 JSX - 虚拟 DOM - 真实 DOM React 的更新流程 props/state 改变 - render函数重新执行 - 产生新的DOM树 - 新旧DOM树进行diff - 计算出差异进行更新 - 更新到真实的DOM React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一颗不同的树 React 需要基于这两颗不同的

    2024年02月15日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包