介绍
所谓的提升性能就是在某些场景下优化react的render渲染次数
- 普通组件的话+
shouldComponentUpdate
⬅⬅⬅⬅⬅ 本文介绍- true 执行 render
- false 不去执行 render
- 纯组件
PureComponent
内部采用浅比较实现的(只能比较基本数据类型,遇到数组对象就虚了)------------- 点击跳转介绍 - 16.6版本后推出
react.memo
方法,可以配合函数式组件一起来去提升react性能。------------- 点击跳转介绍
前景提要(可略过)
- 当我们需要重复使用某个组件的时候,而且传值一样,那么我们可以把组件卸载 循环里面,但这样以来,当我们某个参数发生变化的时候,会重复多次执行该组件,这样对于性能的消耗是不小的,我们只是想让受到数据影响的地方发生渲染执行,而不是全部执行
render(){
let {list} = this.state;
return (
<ul>
{
list.map(item=>{
return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
})
}
</ul>
)
}
比如:
- 我们有三条数据,点击后改变 checked 的 true 或 false 的值
- 但是我们只改变其中的一条数据,其他也跟着渲染了
shouldComponentUpdate
- 当外部传入的属性或者内部调用
setState
方法的时候,此钩子函数就会执行。 - 默认返回
true
,代表组件会进行render
,如果返回false
,组件就不会走render
- 就可以根据外部传入的属性或者内部的状态进行判断,满足某个条件的时候,再去更新render。
- 这个钩子函数可以根据返回true或者返回false,来去提升react的性能。
- 获取之前的属性通过
this.props.xxx
,获取最新的属性通过参数props
获取。
//在子组件内书写
shouldComponentUpdate(props,state){
if(this.props.flag !== props.flag){
return true
}else{
return false
}
}
this.props.flag
之前的属性props.flag
数据变动后传递的属性- 原理:如果你传过来的参数和我现在(还没有更新)的参数一样,那我就返回 false,你就不需要执行了,如果你传过来的参数和现在(话没有更新)的参数不一样,那我就再执行 render() 函数
效果展示:
参考代码
//父组件
import React,{Component} from 'react';
import Three from "./Three"
class App extends Component{
state = {
list:[
{
id:1,
text:"aa",
flag:true
},
{
id:2,
text:"bb",
flag:false
},
{
id:3,
text:"cc",
flag:false
},
]
}
handleChange = (id)=>{
let list = this.state.list.map(item=>{
if(item.id === id){
item.flag = !item.flag
}
return item
})
this.setState({
list
})
}
render(){
let {list} = this.state;
return (
<ul>
{
list.map(item=>{
return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
})
}
</ul>
)
}
}
export default App;
//子组件
import React, { Component } from 'react'
export default class Three extends Component {
state = {
a:10
}
shouldComponentUpdate(props,state){
if(this.props.flag !== props.flag){
return true
}else{
return false
}
}
render() {
console.log("two-render")
return (
<li>
<input type="checkbox" checked={this.props.item.flag} onChange={this.props.handleChange.bind(this,this.props.item.id)}/>
{this.props.item.text}
</li>
)
}
}