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 (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

//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 (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

//hooks 独有优化方式memo

//引入memo
import React, { Component, Fragment,  memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
  console.log("组件渲染");
  return 
count:{props.count}
})
 
class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

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

分享标题：react如何让子组件不渲染
文章出自：http://bzwzjz.com/article/geegsi.html