React学习笔记——关于Memoization（记忆化）解决性能问题

1、什么是Memoization

memoization 来源于拉丁语 memorandum (“to be remembered”)，不要与 memorization 混淆了。

首先看一下维基百科的描述：
Memoization：在计算机科学中，记忆化（英语：memoization而非memorization）是一种提高程序运行速度的优化技术。通过储存大计算量函数的返回值，当这个结果再次被需要时将其从缓存提取，而不用再次计算来节省计算时间。记忆化是一种典型的时间存储平衡方案。

简单来说，memoization 是一种优化技术，主要用于通过存储昂贵的函数调用的结果来加速计算机程序，并在再次发生相同的输入时返回缓存的结果。

React在大多数使用场景中已经足够高性能。如果你的应用足够快并且没有任何渲染问题，那么就没必要往下看了

如果你已经明确知道加载慢的问题在哪，Memoization是最好的尝试方法。

比如React.memo、Hooks中的useCallback、useMemo等，都是Memoization的好的方法。
React.memo是提高性能工具，同时也是一个HOC（高阶组件）。它和React.PureComponent很相似，只不过它应用于函数组件而不是class组件。如果函数组件根据给定的相同的props渲染相同的结果，React会记住这些，跳过渲染组件，并且复用最后一次渲染结果。

2、使用Memoization

我们基于第三方库memoize-one来实现Memoization。

（1）安装memoize-one

yarn add memoize-one

npm install memoize-one --save

官网：memoize-one只记住闯入的函数返回的最后一个参数值，如果下一次使用相同的参数调用该函数，则它返回前一个结果。

（2）案例一

import React, { useState } from 'react'
import memoize from 'memoize-one'

// 在函数式的组件里，将memoize放到组件外
const getNewString = memoize((str) => {
  console.log('memoize方法-----render')
  return str + 'world!'
})

const Child = function(props) {  
  return (
      console.log('子组件----render'),
    <div style={{backgroundColor:'yellowGreen'}}>
      <h3>Child</h3>
      <div>子组件：{props.title}</div>
      {getNewString(props.title)}
    </div>
  )
}

export default function Memoization() {
  let [title, setTitle] = useState('hello111')
  let [count, setCount] = useState(0)

    const handleClick = () => {
        console.log(11111111)
        setTitle('hello222')
    }
  return (
        console.log('父组件-----render'),
        <div>
            <div>父组件:{count}</div>
            <Child title={title}></Child>
            <div>
                修改title：
                <button onClick={handleClick}>change2</button>
                <button onClick={() => setTitle('hello333')}>change3</button>
            </div>
            <div>
                修改count：
                <button onClick={() => setCount(v=>v+1)}>change4</button>
                <button onClick={() => setCount(300)}>change5</button>
            </div>
        </div>
  )
}

效果图：

(点击title按钮)

可以看出：

• 子组件和getNewString方法只在点击按钮后render了一次，后续再点击也没有render。这是因为父组件在首次点击按钮setTitle渲染之后，再次点击按钮渲染时，对比前后发现title没有改变，所以子组件也没有重新render，父组件也只是单独render一次后，也没有重新render。

（点击count按钮）

可以看出：

• 点击按钮change4的时候，父组件每次都重新渲染，虽然传递给子组件的title属性表面没有变，但是每次指向的都是不同的引用地址，所以每次子组件也重新渲染；但是getNewString函数用了memoize方法，每次点击时对比前后props.title参数，如果前后参数相同，则复用之前结果，所以在首次渲染后，后面点击change4按钮就没有渲染。
• 点击按钮change5的时候，父组件的渲染情况和change2、change3类似，子组件点击change5时只渲染了一次；但是getNewStrin函数用了memoize方法，每次点击时对比前后props.title参数，如果前后参数相同，则复用之前结果，所以在首次渲染后，后面点击change5按钮就没有渲染。

（3）案例二（官网）

import React, { useState } from 'react'
import memoize from 'memoize-one'


export default function Memoization() {
    const add = (a, b) => {
        console.log(0)
        return a + b
    }
    const memoizedAdd = memoize(add)
    
    memoizedAdd(1, 2); console.log('1111')
    memoizedAdd(1, 2); console.log('2222')
    // 不执行添加函数：返回先前的结果
    memoizedAdd(1, 2); console.log('3333')
    // 不执行添加函数：返回先前的结果
    memoizedAdd(2, 1); console.log('4444')
    // 调用添加函数以获取新值
    memoizedAdd(1, 3); console.log('5555')
    // 调用添加函数以获取新值
    memoizedAdd(1, 2); console.log('6666')
    // 调用添加函数以获取新值。
	// 虽然这是之前缓存的，
	// 它不是最新的，所以缓存的结果会丢失
  return (
        console.log('父组件-----render'),
        <div>
            <div>父组件</div>
            
        </div>
  )
}

效果图：

可以看出：

• memoize会记住最后一个参数，如果下一次使用相同的参数调用该函数，则它返回前一个结果。所以console（‘2222’）和console（‘3333’）前面的2次函数都没有执行，直接返回之前的结果。

3、注意事项

在使用 memoization时，请记住这些约束：

• 大部分情况下， 每个组件内部都要引入 memoized 方法，已免实例之间相互影响。
• 一般情况下，我们会限制 memoization 帮助函数的缓存空间，以免内存泄漏。（上面的例子中，使用 memoize-one 只缓存最后一次的参数和结果）。