React17 谈性能优化 diff 与 PureComponent

周大胖子 · 发表于 2022-5-5 14:44:18

import React from "react";
// 函数组件 1.没有继承关系、2. 没有生命周期方法
// 函数组件的性能优化：通过React.memo() 高阶函数，该函数会返回给我们一个优化后的组件
// function DaMM(){
// console.log('这是Damm组件执行了一次渲染');
// return (
// <div>这是函数组件</div>
// )
// }
const DaMM = React.memo(
function (){
console.log('这是Damm组件执行了一次渲染');
return (
<div>这是函数组件</div>
)
}
);
// class TTTT extends React.Component {
class TTTT extends React.PureComponent {
constructor(){
super();
this.state={
m:'我'
}
}
// 写在组件里的一个生命周期函数，意思是，当父组件组件变动时，判断这个子组件本身是否发生变化【或者说判断某个值】，
// 如果变了当父组件渲染时，同时渲染子组件，如果没变就不重新渲染子组件后来这个模式省了，直接继承 PureComponent 就可以完成当前组件的优化问题，所以推荐后期都继承这个类
// shouldComponentUpdate( nextProps, nextState,nextContext ){
// if(nextState.m == this.state.m){
// return false;
// }
// return true;
// // return true; // 需要重新渲染
// // return false; // 不需要重新渲染
// }
render() {
console.log('TTTT子组件渲染了render')
return (
<div>测试股 {this.state.m} </div>
)
}
}
// 1.diff算法的优化
class Newdiff extends React.Component {
constructor(){
super();
this.state={
age:17,
name:'花季'
}
}
render() {
console.log('Newdiff父组件渲染了render')
return (
<section>
<div>这里是性能优化测模块 <TTTT></TTTT> {this.state.age} {this.state.name} </div>
<div> <DaMM></DaMM> </div>
<button onClick={()=>{this.testRender()}} >测render </button>
</section>
)
}
testRender(){
this.setState({
age:this.state.age+1
})
}
}
export default Newdiff;

复制代码