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

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

React.memo

当我们组件内部有大量的计算是,避免组件内部进行不必要的重新渲染,使用React.memo进行缓存组件,避免不必要的重新渲染

React.memo是用来判断是否需要重新渲染组件,和shouldComponentUpdate的区别是
shouldComponentUpdate 用于class组件方式,而React.memo 用于hooks方式

语法

React.memo(Component, propsAreEqual)

  • Component 需要缓存的组件
  • propsAreEqual两个props是否相等、当返回true时,那么组件就会复用,不重新渲染组件
 function memo<P extends object>(
        Component: FunctionComponent<P>,
        propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
    ): NamedExoticComponent<P>;
    function memo<T extends ComponentType<any>>(
        Component: T,
        propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
    ): MemoExoticComponent<T>;

使用

默认根据props的浅比较进行来判断子组件是否更新

import React, { useState, useRef, useEffect, useMemo } from 'react';
const  LiveInfo = (props) => {
  return <div>
    LiveInfo
  </div>
}
export default React.memo(LiveInfo);

传递第二个参数是就根据第一个参数返回值判断

import React, { useState, useRef, useEffect, useMemo } from 'react';
const  LiveInfo = (props) => {
  return <div>
    LiveInfo
  </div>
}
export default React.memo(LiveInfo, function propsAreEqual(prevProps, nextProps) {
	if (prevProps.visbile !== nextProps.visible) {
		return false // 更新
	}
	return true // 复用,不重新渲染
});

shouldComponentUpdate

是否应该更新组件,true更新、false不更新

shouldComponentUpdate(nextProps, nextState)

使用

export default class PromiseRender extends React.Component {
  state = {
    component: null,
  };

  shouldComponentUpdate = (nextProps, nextState) => {
    const { component } = this.state;
    if (nextState.component !== component) return true; // 更新
    return false; // 不更新
  };

  render() {
    const { component: Component } = this.state;
    const {  ...rest } = this.props;
    return Component ? (
      <Component {...rest} />
    ) : (
      <div
        style={{
          width: '100%',
          height: '100%',
          margin: 'auto',
          paddingTop: 50,
          textAlign: 'center',
        }}
      >
        
      </div>
    );
  }
}

React.PureComponent

改写了 shouldComponentUpdate,添加上了浅比较

PureComponent 也就是改写了 shouldComponentUpdate ,加上了浅比较,React源码:

if (type.prototype && type.prototype.isPureReactComponent) {
 return (
   !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
 );
}

shallowEqual 源码:文章来源地址https://www.toymoban.com/news/detail-456673.html

const hasOwn = Object.prototype.hasOwnProperty

function is(x, y) {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y
  } else {
    return x !== x && y !== y
  }
}

export default function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false
  }

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) return false

  for (let i = 0; i < keysA.length; i++) {
    if (!hasOwn.call(objB, keysA[i]) ||
        !is(objA[keysA[i]], objB[keysA[i]])) {
      return false
    }
  }

  return true
}

到了这里,关于React.memo、shouldComponentUpdate、PureComponent的基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • React16源码: Component与PureComponent源码实现

    概述 Component 就是组件, 这个概念依托于最直观的在react上的一个表现,那就是 React.Component 我们写的组件大都是继承于 React.Component 这个baseClass 而写的类 这个类代表着我们使用 react 去实现的一个组件 那么在react当中不仅仅只有 Component 这一个baseClass,还有另外一个叫 PureComp

    2024年02月03日
    浏览(34)
  • 手写对象浅比较(React中pureComponent和Component区别)

            PureComponent会给类组件默认加一个shouldComponentUpdate这样的周期函数   在此周期函数中,它对新老的属性/状态 会做一个浅比较   如果经过浅比较,发现属性和状态并没有改变,则返回false(也就是不继续更新组件),有变化才会去更新!! 当使用component时,父组件的

    2024年02月16日
    浏览(35)
  • 5.React.memo 性能优化

    性能优化, React.memo 2. React.memo类似纯组件,可提高组件性能表现(类组件PureComponent)

    2024年02月11日
    浏览(35)
  • React性能优化之memo缓存函数

    React是一个非常流行的前端框架,但是在处理大型应用程序时,性能可能会成为一个问题。为了解决这个问题,React提供了一个称为memo的功能,它可以缓存函数并避免不必要的重新渲染。 memo是React中的一个高阶组件(HOC),它接收一个组件并返回一个新的组件。这个新组件具

    2024年02月11日
    浏览(36)
  • React.Memo和useMemo的区别?

    hello world欢迎来到前端的新世界 😜当前文章系列专栏:react.js 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹 💖感谢大家支持!您的观看就是作者创作的动力 React.memo和useMemo是React中两个不同的特性,用

    2024年02月06日
    浏览(47)
  • React性能优化之Memo、useMemo

    React 的渲染机制,组件内部的 state 或者 props 一旦发生修改,整个组件树都会被重新渲染一次,即时子组件的参数没有被修改,甚至无状态组件 会造成性能浪费 React.memo 是 React 官方提供的一个高阶组件,用于缓存我们的需要优化的组件 React 中的组件被设计为在状态或 props 值

    2024年02月14日
    浏览(36)
  • React.memo每天一个小知识,有例子

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

    2024年01月19日
    浏览(41)
  • React【性能优化_shouldComponentUpdate、性能优化_时间分片、性能优化_虚拟列表、PropTypes 进行类型检查、默认 Prop 值、 TypeScript】(六)

    目录 性能优化_shouldComponentUpdate 性能优化_时间分片 性能优化_虚拟列表

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

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

    2024年01月21日
    浏览(50)
  • react---react router 5 基本使用

    目录 1.路由介绍 2.路由使用 3.路由组件和一般组件 4.Switch 单一匹配 5.解决二级路由样式丢失的问题 6.路由精准匹配和模糊匹配 7.Redirect路由重定向 1.路由介绍 路由是根据不同的 URL 地址展示不同的内容或页面,在 SPA 应用中,大部分页面结果不改变,只改变部分内容的使用。

    2024年02月09日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包