Memo 避免不必要的组件跟随页面更新而进行重新渲染

前言

当页面存在多个组件时，其中一个组件进行渲染 ，导致整个页面进行重新渲染 。

方法1 使用 shouldComponentUpdate 进行判断

// nextProps 下一次组件中的内容 nextState 当前组件中的内容

 shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.name === this.props.name) {
      // 返回false 不进行页面渲染
      return false
    }
    return true
  } 

方法2 继承PureComponent

import React, { Component,PureComponent} from 'react'
class Foo extends PureComponent {
  render() {
    console.log('Foo render')
    return null;
  }
} 

问题1： 只有传入的第一级发生变化才会发生变化 而 第二级发生变化则不会发生过改变

import React, { Component,PureComponent} from 'react'
import './App.css';

class Foo extends PureComponent {

  render() {
    console.log('Foo render')
    return this.props.person.age;
  }
}
class App extends Component {
  state = {
    count: 0,
    person: {
      age:1,
    }
  }
  render() {
    const person = this.state.person;
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add  </button>
        <button onClick={() => {
          person.age++;
          this.setState({
            person,
          });
        }}>Add2  </button>
        {/* <Foo name="Mike" /> */}
        <Foo person={person}/>
      </div>
    )
  }
}

export default App; 

本来应该改变的 却没有重新渲染 所以使用时需要注意使用场景是否符合要求

问题2： 当为该组件条件回调函数后 就每执行一次渲染一次

<Foo person={person} cd={()=>{}}/> 

解决方法： 将函数提出来

callback(){}
<Foo person={person} cd={this.callback}/> 

但是该解决方法不能保证this指向问题 使用 bind(this) 也不能有效解决问题 解决方法：

callback=()=>{}
<Foo person={person} cd={this.callback}/> 

方法3 Memo 包裹function 来实现效果

import React, { Component,memo} from 'react'
const Foo = memo(function Foo(props){
    console.log('Foo render')
    return this.props.person.age;
}) 

案例

// import React, { useState } from 'react'
import React,{Component,useState,useCallback ,useMemo,memo} from 'react'

const Counter = memo(function Counter(props) {
  console.log('Counter render')
  return (
    <h1 onClick={props.onClick}>{ props.count}</h1>
  )
})
function App(props) {
  const [count, setCount] = useState(0);
  const [clickCount, setClickCount] = useState(0);
// 会执行两次 一次等于3 一次从三改成其他数字时
  const double = useMemo(() => {
    return count*2
  }, [count===3])

  const onClick = useCallback(() => {
    setClickCount(clickCount=>clickCount + 1)
  })

  return (
    <div>
      <button
        type="button"
        onClick={()=>{setCount(count+1)}}
      >
        Click ({count})
        double:  ({double})
        clickCount：({clickCount})
      </button>
      <Counter count={double} onClick={onClick}/>
    </div>
  )
}

export default App;