文章页正文上
本篇内容主要讲解“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,{Co免费云主机、域名mponent,Fragment,memo}from'react'; //用memo把hooks包裹即可 constFoo=memo(functionFoo(props){ console.log("组件渲染"); returncount:{props.count}}) classAppextendsComponent{ state={ count:0, name:0 } render(){ return() } }
到此,相信大家对“react如何让子组件不渲染”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
今天小编给大家分享一下react如何实现跳转到新页面的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 react实现跳转到新页面的方法:1、通过应…
文章页内容下