react 组件性能优化
减轻state
减轻state
:只存储跟组件渲染相关的数据(比如: count/列表数据/ loading等)- 注意:不用做渲染的数据不要放在 state 中,比如定时器id等
- 对于这种需要在多个方法中用到的数据,应该放在 this 中
避免不必要的重新渲染
- 组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰
- 问题:子组件没有任何变化时也会重新渲染
- 如何避免不必要的重新渲染呢?
- 解决方式:使用
钩子函数shouldComponentUpdate(nextProps, nextState)
- 作用:通过返回值决定该组件是否重新渲染,返回true表示重新渲染,false表示不重新渲染
- 触发时机:更新阶段的钩子函数,组件重新渲染前执行( shouldComponentUpdate ==> render )
代码示例:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
count: 0
}
handleClick = () => {
this.setState(state => {
return {
count: state.count + 1
}
})
}
// 钩子函数
shouldComponentUpdate(nextProps, nextState) {
// nextProps: 最新的props
// nextState: 最新的state
// 返回false,阻止组件重新渲染
// return false
// 最新的状态
console.log('最新的state', nextState);
// 更新前的状态
console.log('this的state', this.state);
return true
}
render() {
console.log('组件更新了')
return (
<div>
<h1>计数器:{this.state.count}</h1>
<button onClick={this.handleClick}>+1</button>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
案例——随机数 state 处理重复更新
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
number: 0
}
handleClick = e => {
this.setState(state => {
return {
number: Math.floor(Math.random() * 3)
}
})
}
// 因为两次生成的随机数可能相同,如果相同,此时,不需要重新渲染
shouldComponentUpdate(nextProps, nextState) {
console.log('最新状态:', nextState, '当前状态:', this.state);
if(nextState.number === this.state.number) {
return false
}
return true
// 可优化为下面语句
// return nextState.number !== this.state.number
}
render() {
console.log('render');
return (
<div>
<h1>随机数:{this.state.number}</h1>
<button onClick={this.handleClick}>重新生成</button>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
案例——随机数 props 处理重复更新
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
number: 0
}
handleClick = e => {
this.setState(state => {
return {
number: Math.floor(Math.random() * 3)
}
})
}
render() {
console.log('render');
return (
<div>
<NumberBox number={this.state.number} />
<button onClick={this.handleClick}>重新生成</button>
</div>
)
}
}
class NumberBox extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
console.log('最新props:', nextProps, '当前props:', this.props);
// 如果前后两次的number值相同,就返回false,不更新组件
return nextProps.number !== this.props.number
}
render() {
console.log('子组件中的render');
return (
<h1>随机数:{this.props.number}</h1>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
纯组件
- 说明︰纯组件内部的对比是
shallow compare
(浅层对比) - 对于值类型来说:比较两个值是否相同(直接赋值即可,没有坑)
- 对于
引用类型来
说:只比较对象的引用(地址)是否相同
- 注意:
state 或 props中属性值为引用类型时,应该创建新数据,不要直接修改原数据!
数组: