组件优化性能
从“反应”导入做出反应;
类主页扩展了做出反应.组件{
构造器(道具){ 0
超级(道具);
this.state={
66岁
}
}
render(){ 0
控制台。日志('主页被渲染了');
返回(
差异
pHome/p
p{this.state.age}/p
/div
)
}
}
类应用扩展了做出反应.组件{
构造器(道具){ 0
超级(道具);
this.state={
名为: '谢本音'
}
}
render(){ 0
控制台。日志(' App组件被渲染了');
返回(
差异
h1App/h1
p{this.state.name}/p
按钮OnClick={()=this。Btn click()} Btn/按钮
主页/
/div
)
}
BTN点击(){ 0
这个。setstate({ 0
名称: 'xby '
})
}
}
导出默认应用
修改应用组件中的这个。州,家子组件也会被重新渲染
类组件优化性能
从“反应”导入做出反应;
类主页扩展了做出反应.PureComponent { //自己的这个州没有发生改变就不会重新渲染
构造器(道具){ 0
超级(道具);
this.state={
66岁
}
}
render(){ 0
控制台。日志('主页被渲染了');
返回(
差异
pHome/p
p{this.state.age}/p
/div
)
}
}
类应用扩展了做出反应.组件{
构造器(道具){ 0
超级(道具);
this.state={
名为: '谢本音'
}
}
render(){ 0
控制台。日志(' App组件被渲染了');
返回(
差异
h1App/h1
p{this.state.name}/p
按钮OnClick={()=this。Btn click()} Btn/按钮
主页/
/div
)
}
BTN点击(){ 0
这个。setstate({ 0
名称: 'xby '
})
}
}
导出默认应用
使用做出反应PureComponent .创建出来的组件,会自动进行优化,父组件的这个州发生改变不会重新渲染子组件
函数式组件
从“反应”导入做出反应;
const MemoHome=react。memo(函数(){//返回一个优化后的组件
控制台。日志('主页被渲染了');
返回(
divHome/div
)
})
类应用扩展了做出反应.组件{
构造器(道具){ 0
超级(道具);
this.state={
名为: '谢本音'
}
}
render(){ 0
返回(
差异
h1App/h1
p{this.state.name}/p
按钮OnClick={()=this。Btn click()} Btn/按钮
MemoHome /
/div
)
}
BTN点击(){ 0
这个。setstate({ 0
名称: 'xby '
})
}
}
导出默认应用
使用做出反应。备忘录优化函数式组件,父组件自身的这个州发生改变,子组件不会重新渲染
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/149519.html