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

71 阅读 0 评论 47 点赞

我是靠谱客的博主热心水池，最近开发中收集的这篇文章主要介绍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;