第26节——React.memo+ React.PureComponent

一、React.memo的概念

**React.memo 为高阶组件。**如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

import React, { useState, useEffect, useContext } from 'react';

// 如果num不改变当前组件不会重新渲染
const MyComponent =  React.memo((props) => {
  /* 使用 props 渲染 */
  return (
    <div>{props.num}</div>
  )
})
export default function hook() {

  const [num, setNum] = useState(1)

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <MyComponent num={num}></MyComponent>
    </div>
  )
}

二、React.memo的特点

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。

三、React.memo可接受第二个参数

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现,第二个参数是一个函数，返回true不渲染，false渲染

import React, { useState, useEffect, useContext } from 'react';


const MyComponent =  React.memo((props) => {
  /* 使用 props 渲染 */
  return (
    <div>{props.num}</div>
  )
  /**
   * prevProps 上次的值
   * nextProps 最新的值
   * 
   * 如果传来的值是偶数的话则不更新组件
   */
}, (prevProps, nextProps) => {
  console.log(nextProps, nextProps.num % 2)
  return nextProps.num % 2 === 0
})

export default function hook() {

  const [num, setNum] = useState(1)

  useEffect(() => {
    /**
     * 当它是一个空数组时，回调只会被触发一次，类似于 componentDidMount
     */
    console.log("componentDidmount")
  }, [])

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <MyComponent num={num}></MyComponent>
    </div>
  )
}

四、React.memo的使用场景

1、展示型组件

如果你有一个仅仅用于展示数据的组件，且数据不需要频繁更新，那么可以使用 React.memo 避免不必要的重新渲染。

2、性能瓶颈

如果某个组件是你应用中性能瓶颈的主要原因，那么可以使用 React.memo 优化它的性能。

3、模拟 PureComponent

如果你想在函数组件中模拟类组件的 PureComponent 行为，那么可以使用 React.memo

五、React.PureComponent的概念

React.PureComponent 是一个特殊的 React 组件类，它可以自动实现浅层比较（shallow comparison），决定是否需要重新渲染组件。

与普通的 React 组件类不同，React.PureComponent 可以避免不必要的渲染，提高组件的性能。

如果你的组件是一个展示型组件，且不需要经常更新，那么你可以使用 React.PureComponent 代替普通的 React 组件类。

六、例子

使用方法非常简单，只需要在组件类上继承 React.PureComponent 即可

class MyComponent extends React.PureComponent {
  render() {
    /* ... */
  }
}

六、总结

因为 React.PureComponent 实现了浅层比较，所以可以避免不必要的渲染。如果你的组件需要进行深层比较，那么你需要手动实现 shouldComponentUpdate 方法。

因此，如果你的组件是一个展示型组件，且不需要经常更新，那么可以考虑使用 React.PureComponent 来优化组件的性能

七、React.PureComponent 和 React.memo的区别

1、继承关系

React.PureComponent 是一个 React 组件类，可以被继承；而 React.memo 是一个高阶组件，不能被继承。

2、比较方式

React.PureComponent 使用的是浅层比较（shallow comparison）来决定是否需要重新渲染组件；而 React.memo 是通过比较组件的 props 来决定是否需要重新渲染的。如果需要进行深层比较，则需要使用自定义的比较函数（comparison function）。

3、使用场景

React.PureComponent 适用于状态不多、不需要处理复杂逻辑的组件；而 React.memo 则适用于任何情况下，甚至可以代替 React.PureComponent

4、总结

因此，当你需要优化 React 组件的性能时，应该根据具体情况来决定使用 React.PureComponent 还是 React.memo。通常来说，React.memo 更加灵活和通用，因此更加推荐使用