React.memo

當(dāng)我們組件內(nèi)部有大量的計(jì)算是，避免組件內(nèi)部進(jìn)行不必要的重新渲染，使用React.memo進(jìn)行緩存組件，避免不必要的重新渲染

React.memo是用來判斷是否需要重新渲染組件，和shouldComponentUpdate的區(qū)別是
shouldComponentUpdate 用于class組件方式，而React.memo 用于hooks方式

語法

React.memo(Component, propsAreEqual)

• Component 需要緩存的組件
• propsAreEqual兩個(gè)props是否相等、當(dāng)返回true時(shí)，那么組件就會(huì)復(fù)用，不重新渲染組件

 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>;

使用

默認(rèn)根據(jù)props的淺比較進(jìn)行來判斷子組件是否更新

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

傳遞第二個(gè)參數(shù)是就根據(jù)第一個(gè)參數(shù)返回值判斷

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 // 復(fù)用，不重新渲染
});

shouldComponentUpdate

是否應(yīng)該更新組件，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 源碼：文章來源地址http://www.zghlxwxcb.cn/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
}

到了這里，關(guān)于React.memo、shouldComponentUpdate、PureComponent的基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！