React.memo()、useCallback()、useMemo()区别及基本使用

先来看个简单的例子

// Parent.jsx
import react, { useState } from 'react';
import Child from '../Child';


function Parent() {
  const [parentCount, setParentCount] = useState(0);
  console.log('父組件重新渲染--------------');
  return (
    <div style={{ background: 'lightseagreen' }}>
      <Child />
      <button type="button" onClick={() => { setParentCount(parentCount + 1); }}>父组件 +1</button>
    </div>
  );
}


export default Parent;

// Child.jsx
import React from 'react';


function Child() {
  console.log('------------子組件重新渲染');
  return (
    <div style={{ background: 'pink', margin: '50px 0' }}>
      <button type="button">子組件</button>
    </div>
  );
}


export default Child;

当点击父组件按钮时，父组件的状态父组件会被更新，导致这些父组件重渲染，子组件也会重渲染；而此时我们的子组件和父组件之间并没有依赖关系，因此重复渲染是优化掉的，可以使用React.memo 包裹子组件

// Child.jsx
import React from 'react';
// ...other code
export default React.memo(Child);

React.memo(Comp[, fn])

用于减少子组件的渲染

React.memo 是一个高阶组件（参数为组件，返回的是新组件的函数即为高阶组件）

对外部来说，React.memo 会检查道具的变更，只有当核心的道具发生变化时组件才会重新成型，纽扣我们再点击父组件，子就不会膨胀了。

React.memo 对复杂对象做浅层对比，可以通过过程第二个参数来控制对比

第二个参数为一个增强渲染细节的函数。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

useMemo(fn[, DependentArray])

用于每次组件重新渲染时重复进行复杂的计算，参数为一个函数和依赖项数组，返回函数和函数的调用结果。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo作用类似于VUE的计算（计算属性），不同之处在于需要手动传入依赖项，依赖当项变更时会重新调用传入的函数，返回计算值。

依赖项为空数组时则直接返回上次的计算结果。

不依赖项时，每次组件刷新都会重新计算，应该在代码能正常运行的情况下将其作为一种优化策略策略。

修改下我们的例子，请注意这里包裹了子组件，保证测试时子组件重重渲染受重球的道具变化的影响。

// Parent.jsx
import React, { useState, useMemo } from 'react';
import Child from '../Child';


function Parent() {
  const [parentCount, setParentCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);
  console.log('父組件重新渲染--------------');


  // 一个复杂的计算
  const computedFn = (a, b) => {
    console.log('----重新执行了计算----');
    return a + b;
  };


  const computedValue = useMemo(() => {
    return computedFn(parentCount, 1);
  }, [parentCount]);


  return (
    <div style={{ background: 'lightseagreen' }}>
      <Child parentCount={parentCount} computedValue={computedValue} />
      <button type="button" onClick={() => { setParentCount(parentCount + 1); }}>父组件 +1</button>
      <button type="button" onClick={() => { setOtherCount(otherCount + 1); }}>父组件 otherCount+1</button>
    </div>
  );
}

点击第一个按钮，依赖项更改，输出重执行了计算，点击第二个按钮，更改更改的不是计算值，因为依赖项，因此不会重计算，组件也不会重渲染。

useCallback(fn[, DependentArray])

需要传递给子组件的函数，连接子组件的重复渲染，参数为一个函数和任选的依赖项数组，返回出入函数的记忆版本。

// Parent.jsx
import React, { useState } from 'react';
import Child from '../Child';


function Parent() {
  const [parentCount, setParentCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);
  console.log('父組件重新渲染--------------');


  const computedFn = () => {
    return parentCount + 1;
  };


  return (
    <div style={{ background: 'lightseagreen' }}>
      <Child parentCount={parentCount} computedFn={computedFn} />
      <button type="button" onClick={() => { setParentCount(parentCount + 1); }}>父组件 +1</button>
      <button type="button" onClick={() => { setOtherCount(otherCount + 1); }}>父组件 otherCount+1</button>
    </div>
  );
}


export default Parent;


// Child.jsx
import React from 'react';


function Child(props) {
  const { computedValue, computedFn } = props;
  console.log('------------子組件重新渲染');
  return (
    <div style={{ background: 'pink', margin: '50px 0' }}>
      <div>
        父组件传入的计算结果：
        {computedValue}
      </div>
      <button type="button" onClick={computedFn}>子組件</button>
    </div>
  );
}


export default React.memo(Child);

当点击第二个按钮时，子组件就可以重新渲染

给computedFn 加上useCallBack

// Parent.jsx
import React, { useState, useCallback } from 'react';


// ...other code


  const computedFn = useCallback(() => {
    console.log(parentCount);
    return parentCount + 1;
  }, [parentCount]) ;


// ...other code


export default Parent;

一次再点击父组件第二个按钮子组件，子组件不会变大，使用Callback的依赖项没有变化，返回的是上一次渲染的函数，因此组件子组件的道具没有变，组件不会重渲染。

需要是，被useCallback保存的函数内部作用域也不会发生变化，因此，当项数组为注意的时候，依赖useCallback的函数的内部通过闭包取的组件内的要素值始终不变。

import React, { useState, useCallback } from 'react';
import Child from '../Child';


let a = 0;
function Parent() {
  const [parentCount, setParentCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);
  console.log('父組件重新渲染--------------');


  const computedFn = useCallback(() => {
    // 依赖项为空，这里的打印值始终不变；
    // 因为组件state变化时会重新渲染整个组件,而这里parentCount取的始终是第一次渲染版本的值
    console.log(parentCount); 
    // 这里的打印值会实时更新，因为变量直接定义在组件外部，不受组件重新渲染影响
    console.log(a);
    return parentCount + 1;
  }, []) ;


  return (
    <div style={{ background: 'lightseagreen' }}>
      <Child parentCount={parentCount} computedFn={computedFn} />
      <button type="button" onClick={() => { setParentCount(parentCount + 1); a += 1; }}>父组件 +1</button>
      <button type="button" onClick={() => { setOtherCount(otherCount + 1); }}>父组件 otherCount+1</button>
    </div>
  );
}


export default Parent;

因为useCallback目的是减少子组件重渲染，所以需要搭配子组件的shouldComponentUpdate或React.memo一起使用优化意义。

以上是依赖项更改不希望的情况，当依赖项更改的时候，使用回调的记忆效果就不好，可以使用引用依赖项解决。

function Form() {
  const [text, updateText] = useState('');
  const textRef = useRef();


  useEffect(() => {
    textRef.current = text; // 把它写入 ref
  });


  const handleSubmit = useCallback(() => {
    // ref 对象在组件的整个生命周期内保持不变
    // 从 ref 读取它，current的变更不会引起组件的重新渲染，而函数内部又能拿到正确的值
    const currentText = textRef.current; 
    alert(currentText);
  }, [textRef]);


  return (
    <>
      <input value={text} onChange={e => updateText(e.target.value)} />
      <ExpensiveTree onSubmit={handleSubmit} />
    </>
  );
}

使用引用

看看官方介绍

const refContainer = useRef(initialValue);

useRef 返回一个附属的 ref 对象，其 .current 被初始化为粒子的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变

可以理解为：使用引用创建的对象拥有当前的属性，这个像个盒子，啥可能存，包括DOM节点；返回的引用对象在组件的整个生命周期内保持不变，即存在当前的值组件模糊渲染影响，始终保持着一开始的引用；同时属性的修改也不会触发组件的渲染；这个属性的最终效果是useRef的参数

看看官方例子

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

当把useRef创建的对象传给DOM元素的ref属性时，将动态DOM元素的引用存入当前属性，这样就可以通过ref对象直接操作DOM元素了。

学习更多技能

请点击下方公众号

React.memo()、useCallback()、useMemo()区别及基本使用

React.memo(Comp[, fn])

useMemo(fn[, DependentArray])

useCallback(fn[, DependentArray])

使用引用

继续阅读

ACdream 1162 胖子教你线段树

POJ 3139 Balancing the Scale

iOS开发Tips3:循环的性能

1275.找出井字棋的获胜者Java

Activity的生命周期及加载模式1.Activity的生命周期2.Activity的加载模式

Android四大组件之Activity(七大生命周期)

Android四大组件之一：Activity总结（上）

Android四大组件之Activity Life Cycle

【React】1020- React useEffect 使用指南

CodeChef PRIMEDST Prime Distance On Tree

力扣每日一练之数组下篇Day3

HDU 5719 Arrange

PMBOK学习笔记－项目生命周期特征

HDU 4609 3-idiots

HDU 1402 A * B Problem Plus

数组和类数组