react如何让子组件不渲染

云天博客 • 03/05 21:00 • 开发 • 阅读 49

本篇内容主要讲解“react如何让子组件不渲染”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react如何让子组件不渲染”吧! react让子组件不渲染的方法：1、通过“shouldComponentUpdate(nextProps,nextState){…}”实现父组件渲染，子组件不渲染；2、通过“PureComponent”方式让子组件不渲染；3、引入memo，用memo把hooks包裹即可。React 父组件重新渲染，子组件不需要渲染的三种性能优化方式(PureComponent,memo,shouldComponentUpdate);//使用React普通函数时，可以使用两种优化方式，PureComponent和shouldComponentUpdate//shouldComponentUpdate


//shouldComponentUpdate
classFooextendsComponent{
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){//传入的count与组件当前props的count比较,count没改变，returnfalse，不渲染
returnfalse//不渲染
}
returntrue;//渲染
}
render(){
console.log("组件渲染");//可以看到，当父组件的name改变时，子组件不会打印，只有count改变，才会打印，优化性能
returnnull
}
}

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(






)
}
}

//PureComponent


//引入PureComponent
importReact,{Component,Fragment,PureComponent}from'react';
//PureComponent，自动比较组件数据是否改变，注意只能比较一层，比如一个对象，对象中的属性改变，他不会重新渲染，只有对象改变，才重新渲染。
classFooextendsPureComponent{
render(){
console.log("组件渲染");
returnnull
}
}

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(






)
}
}

//hooks 独有优化方式memo


//引入memo
importReact,{Component,Fragment,memo}from'react';
//用memo把hooks包裹即可
constFoo=memo(functionFoo(props){
console.log("组件渲染");
returncount:{props.count}
})

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(






)
}
}

到此，相信大家对“react如何让子组件不渲染”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: 怎么通过yarn自动生成vue组件

这篇文章主要介绍“怎么通过yarn自动生成vue组件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么通过yarn自动生成vue组件”文章能帮助大家解决问题。实践步骤安装一下chalk，这个插件能让我们的控制台输出语句…