详解react阻止无效重渲染的多种方式
51 浏览量
2020-10-17
15:44:45
上传
评论
收藏 87KB PDF 举报
详解详解react阻止无效重渲染的多种方式阻止无效重渲染的多种方式
主要介绍了详解react阻止无效重渲染的多种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
一起跟随小编过来看看吧
在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？
当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。
以下几个问题同样值得我们思考：
setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？
如果state和从父组件传过来的props都没变化，那他就一定不会发生重渲染吗？
首先，我们来解决这两个问题
没有导致state的值发生变化的this.setState(）是否会导致重渲染 --- 会
import React from 'react'
class Test extends React.Component{
constructor(props) {
super(props);
this.state = {
Number:1//设state中Number值为1
}
}
//这里调用了setState但是并没有改变setState中的值
handleClick = () => {
const preNumber = this.state.Number
this.setState({
Number:this.state.Number
})
}
render(){
//当render函数被调用时，打印当前的Number
console.log(this.state.Number)
return(<h1 onClick = {this.handleClick}>
{this.state.Number}
</h1>)
}
}
从控制台的打印结果可以看出：共打印了15次1，但是组件并没有发生任何变化！！！
这样的结果不是我们想要的，如何阻止组件的重渲染呢？这时我们想到了React的一个生命周期钩子 shouldComponentUpdate
react生命周期中有这样一个钩子，叫shouldComponentUpdate函数，是重渲染时render()函数调用前被调用的函数，
两个参数 nextProps和nextState ，分别表示下一个props和state的值。
当函数返回false时，阻止接下来的render()函数的调用，阻止组件重渲染，返回true时，组件照常渲染
//加入shouldComponentUpdate钩子
//在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用
shouldComponentUpdate(nextProps,nextState){
if(nextState.Number == this.state.Number){
return false
}
}
加入上述代码后，打开控制台，点击按钮，还是白白的，说明无效的重渲染被我们阻止了
第二个问题，组件的state和从父组件传递过来的props都没改变，组件还会重渲染吗 --- 可能
同样可以通过shouldComponentUpdate钩子进行阻止
所以说，前后不改变state的值的setState和无数据交换的父组件的重渲染都会导致组件的重渲染，但我们可以通过
shouldComponentUpdate来阻止这两种情况
shouldComponentUpdate并不是完美的，只能阻止扁平的对象
nextState.Number == this.state.Number
如果调用层次比较深
评论0
最新资源