zoukankan      html  css  js  c++  java
  • 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 (
          <Fragment>
            <Foo count={this.state.count} ></Foo>
            <button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
            <button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
          </Fragment>
    
        )
      }
    }
    

      

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

      

    //hooks 独有优化方式memo

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

      

  • 相关阅读:
    SUSE 安装 iServer、iDesktop启动异常问题
    各系统勒索补丁下载地址
    centos 安装atom 笔记
    转载---SuperMap GIS 9D SP1学习视频播单
    SuSE的命令安装软件 zypper
    Leaflet客户端学习笔记
    设置UI控件的Layer属性(边框可见,边框颜色,边框宽度,边框圆角)
    安全清理Xcode 缓存垃圾
    OC变量命名禁忌
    iOS中的应用启动原理
  • 原文地址:https://www.cnblogs.com/uimeigui/p/12610375.html
Copyright © 2011-2022 走看看