react组件memo useMemo useCallback使用区别示例

目录
  • 正文
    • memo使用
    • useMemo使用
    • useCallback使用

正文

memo用来优化函数组件的重复渲染行为,针对的是一个组件

useMemo返回一个memoized的值

本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费

useCallback返回一个memoized的函数

useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数 memo则可以直接作用于组件,例如

    export default memo(Mycomponent)

useMemo和useEffect的执行时机是不一致的:useEffect执行的是副作用,所以一定是在渲染之后执行的,useMemo是需要有返回值的,而返回值可以直接参与渲染的,所以useMemo是在渲染期间完成的

memo使用

    // 父组件
    const Parent = ()=>{
        const [count, setCount] = useState(1)
        const addCount = ()=>{
           setCount(count + 1)
        }
        return(
            <>
             <div onClick={addCount}>计数: {count}</div>
             <Child />
            </>
        )
    }
    // 子组件
    const Child = memo(()=>{
        console.log('child start---')
        return(
            <div>child...</div>
        )
    })
    // 使用memo后,子组件的props或者state没有变化时,将不会对子组件进行渲染

useMemo使用

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值变化时才会触发sum函数执行

useCallback使用

    // 父组件,给子组件传递name和changeName方法
    const Parent = () => {
      const [count, setCount] = useState(1);
      const [name, setName] = useState("bbz");
      const addCount = () => {
        setCount(count + 1);
      };
      const changeName = useCallback((n) => {
        setName(n);
      }, []);
      return (
        <>
          <div onClick={addCount}>计数: {count}</div>
          <Child name={name} changeName={changeName} />
        </>
      );
    };
    // 子组件
    const Child = ({ name, changeName }) => {
      console.log("child start---");
      return (
        <div
          onClick={() => {
            changeName("bobozai");
          }}
        >
          child comps: {name}
        </div>
      );
    };
    // 如果不使用useCallback,则点击父组件计数的同时,子组件会console进行渲染,
    // 因为更新count时父组件会重新渲染,导致重新生成了一个changeName函数,
    // 所以子组件的props变了,导致子组件会重新渲染
    // 而对changeName函数用useCallback进行包裹,则对函数进行缓存不会重新生成

以上就是react组件memo useMemo useCallback使用区别的详细内容,更多关于react组件memo useMemo useCallback的资料请关注我们其它相关文章!

(0)

相关推荐

  • React组件设计过程之仿抖音订单组件

    目录 前言 前期准备 实现后的组件效果 1. 组件设计思路 2. 实现 Myorder 组件 2.1 实现tab切换效果 2.2 获取数据 2.3 实现搜索功能 2.4 设置loading状态 2.5 实现Empty(空状态)组件 3. 实现 OederList 组件 4. 实现 OrderNote 组件 5. 实现 RecommendList 组件 最后 前言 作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心.组件就是对一

  • React手写一个手风琴组件示例

    目录 知识点 结构分析 AccordionItem子组件 Accordion容器组件 知识点 emotion语法 react语法 css语法 typescript类型语法 结构分析 根据上图,我们来分析一下,一个手风琴组件应该包含一个手风琴容器组件和多个手风琴子元素组件.因此,假设我们实现好了所有的逻辑,并写出使用demo,那么代码应该如下: <Accordion defaultIndex="1" onItemClick={console.log}> <Accordi

  • React useMemo和useCallback的使用场景

    useMemo 我们知道当父组件发生重新渲染时,其所有(状态.局部变量等)都是新的.一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的 diff 失效,依旧会重新执行该部分逻辑.在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次父组件发生更新时,都会触发数据请求. function Info({ style, }) { console.log('Info 发生渲染'); useEffect(() => { consol

  • react组件memo useMemo useCallback使用区别示例

    目录 正文 memo使用 useMemo使用 useCallback使用 正文 memo用来优化函数组件的重复渲染行为,针对的是一个组件 useMemo返回一个memoized的值 本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费 useCallback返回一个memoized的函数 useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数

  • react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • 解析React中useMemo与useCallback的区别

    useMemo 把“创建”函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算. importReact, { useState, useMemo } from"react"; export default functionUseMemoPage(props) { const [count, setCount] =useState(0); constexpensive=useMemo

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • React.memo函数中的参数示例详解

    目录 React.memo?这是个啥? React.memo的第一个参数 父组件 子组件 React.memo优化 React.memo的第二个参数 父组件 子组件 React.memo优化 父组件 子组件 小结 React.memo?这是个啥? 按照官方文档的解释: 如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现.这意味着在这种情况下,React 将跳过渲染组件的操作并直

  • ES6下React组件的写法示例代码

    本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍: 一:定义React组件 class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; } } 二:声明prop类型与默认prop class Hello extends React.Component { // ... } Hello.propTypes = { value: Re

  • React 组件中的 bind(this)示例代码

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

  • React组件内事件传参实现tab切换的示例代码

    本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析

  • react 组件实现无缝轮播示例详解

    目录 正文 无缝轮播 实现思路 构思使用时代码结构 Carousel组件 CarouselItem组件 完善组件 完成小圆点 正文 需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播 无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常

  • React实现锚点跳转组件附带吸顶效果的示例代码

    React实现锚点跳转组件附带吸顶效果 import React, { useRef, useState, useEffect } from 'react'; import styles from './index.less'; import classnames from 'classnames'; function AnchorTabber(props) { const root = useRef(null); const header = useRef(null); const { att

随机推荐