react如何让子组件不渲染
本篇内容主要讲解“react如何让子组件不渲染”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react如何让子组件不渲染”吧!
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的恒山网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
react让子组件不渲染的方法:1、通过“shouldComponentUpdate(nextProps,nextState){...}”实现父组件渲染,子组件不渲染;2、通过“PureComponent”方式让子组件不渲染;3、引入memo,用memo把hooks包裹即可。
React 父组件重新渲染,子组件不需要渲染的三种性能优化方式(PureComponent,memo,shouldComponentUpdate);
//使用React普通函数时,可以使用两种优化方式,PureComponent和shouldComponentUpdate
//shouldComponentUpdate
//shouldComponentUpdate
class Foo extends Component {
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){ //传入的count与组件当前props的count比较,count没改变,return false,不渲染
return false //不渲染
}
return true; //渲染
}
render() {
console.log("组件渲染"); //可以看到,当父组件的name改变时,子组件不会打印,只有count改变,才会打印,优化性能
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
//PureComponent
//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent,自动比较组件数据是否改变,注意只能比较一层,比如一个对象,对象中的属性改变,他不会重新渲染,只有对象改变,才重新渲染。
class Foo extends PureComponent {
render() {
console.log("组件渲染");
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
//hooks 独有优化方式memo
//引入memo
import React, { Component, Fragment, memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
console.log("组件渲染");
return
到此,相信大家对“react如何让子组件不渲染”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
文章标题:react如何让子组件不渲染
新闻来源:http://myzitong.com/article/geegsi.html