React 的 PureComponent Vs Component

一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能

1.所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

而本来我们做的事情如下,这里判断了state有没有发生变化(prop同理),从而决定要不要重新渲染,这里的函数在一个继承了Component的组件中,而这里this.state.person是一个对象,你会发现,在这个对象的引用没有发生变化的时候是不会重新render的(即下面提到的第三点),所以我们可以用shouldComponentUpdate进行优化,这个方法如果返回false,表示不需要重新进行渲染,返回true则重新渲染,默认返回true

  shouldComponentUpdate(nextProps, nextState) {
    return (nextState.person !== this.state.person);
  }

2.上面提到的某些情况下可以使用PureComponent来提升性能,那具体是哪些情况可以,哪些情况不可以呢,实践出真知

3.如下显示的是一个IndexPage组件,设置了一个stateisShow,通过一个按钮点击可以改变它的值,结果是:初始化的时候输出的是constructorrender,而第一次点击按钮,会输出一次render,即重新渲染了一次,界面也会从显示false变成显示true,但是当这个组件是继承自PureComponent的时候,再点击的时,不会再输出render,即不会再重新渲染了,而当这个组件是继承自Component时,还是会输出render,还是会重新渲染,这时候就是PureComponent内部做了优化的体现

4.同理也适用于stringnumber等基本数据类型,因为基本数据类型,值改变了就算改变了

import React, { PureComponent } from ‘react‘;

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      isShow: false
    };
    console.log(‘constructor‘);
  }
  changeState = () => {
    this.setState({
      isShow: true
    })
  };
  render() {
    console.log(‘render‘);
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>{this.state.isShow.toString()}</div>
      </div>
    );
  }
}

5.当这个this.state.arr是一个数组时,且这个组件是继承自PureComponent时,初始化依旧是输出constructorrender,但是当点击按钮时,界面上没有变化,也没有输出render,证明没有渲染,但是我们可以从下面的注释中看到,每点击一次按钮,我们想要修改的arr的值已经改变,而这个值将去修改this.state.arr,但是因为在PureComponent浅比较这个数组的引用没有变化所以没有渲染,this.state.arr也没有更新,因为在this.setState()以后,值是在render的时候更新的,这里涉及到this.setState()的知识

6.但是当这个组件是继承自Component的时候,初始化依旧是输出constructorrender,但是当点击按钮时,界面上出现了变化,即我们打印处理的arr的值输出,而且每点击一次按钮都会输出一次render,证明已经重新渲染,this.state.arr的值已经更新,所以我们能在界面上看到这个变化

import React, { PureComponent } from ‘react‘;

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:[‘1‘]
    };
    console.log(‘constructor‘);
  }
  changeState = () => {
    let { arr } = this.state;
    arr.push(‘2‘);
    console.log(arr);
    // ["1", "2"]
    // ["1", "2", "2"]
    // ["1", "2", "2", "2"]
    // ....
    this.setState({
      arr
    })
  };
  render() {
    console.log(‘render‘);
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
        </div>
      </div>
    );
  }
}

7.下面的例子用扩展运算符产生新数组,使this.state.arr的引用发生了变化,所以初始化的时候输出constructorrender后,每次点击按钮都会输出render,界面也会变化,不管该组件是继承自Component还是PureComponent

import React, { PureComponent } from ‘react‘;

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:[‘1‘]
    };
    console.log(‘constructor‘);
  }
  changeState = () => {
    let { arr } = this.state;
    this.setState({
      arr: [...arr, ‘2‘]
    })
  };
  render() {
    console.log(‘render‘);
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
          </div>
      </div>
    );
  }
}

8.上面的情况同样适用于对象的情况

二.PureComponent不仅会影响本身,而且会影响子组件,所以PureComponent最佳情况是展示组件

1.我们让IndexPage组件里面包含一个子组件Example来展示PureComponent是如何影响子组件的

2.父组件继承PureComponent,子组件继承Component时:下面的结果初始化时输出为constructorIndexPage renderexample render,但是当我们点击按钮时,界面没有变化,因为这个this.state.person对象的引用没有改变,只是改变了它里面的属性值所以尽管子组件是继承Component的也没有办法渲染,因为父组件是PureComponent,父组件根本没有渲染,所以子组件也不会渲染

3.父组件继承PureComponent,子组件继承PureComponent时:因为渲染在父组件的时候就没有进行,相当于被拦截了,所以子组件是PureComponent还是Component根本不会影响结果,界面依旧没有变化

4.父组件继承Component,子组件继承PureComponent时:结果和我们预期的一样,即初始化是会输出constructorIndexPage renderexample render,但是点击的时候只会出现IndexPage render,因为父组件是Component,所以父组件会渲染,但是
当父组件把值传给子组件的时候,因为子组件是PureComponent,所以它会对prop进行浅比较,发现这个person对象的引用没有发生变化,所以不会重新渲染,而界面显示是由子组件显示的,所以界面也不会变化

5.父组件继承Component,子组件继承Component时:初始化是会输出constructorIndexPage renderexample render,当我们第一次点击按钮以后,界面发生变化,后面就不再改变,因为我们一直把它设置为sxt2,但是每点击一次都会输出IndexPage renderexample render,因为每次不管父组件还是子组件都会渲染

6.所以正如下面第四条说的,如果stateprop一直变化的话,还是建议使用Component,并且PureComponent的最好作为展示组件

//父组件
import React, { PureComponent, Component } from ‘react‘;
import Example from "../components/Example";

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      person: {
        name: ‘sxt‘
      }
    };
    console.log(‘constructor‘);
  }
  changeState = () => {
    let { person } = this.state;
    person.name = ‘sxt2‘;
    this.setState({
      person
    })
  };
  render() {
    console.log(‘IndexPage render‘);
    const { person } = this.state;
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <Example person={person} />
      </div>
    );
  }
}
//子组件
import React, { Component } from ‘react‘;

class Example extends Component {

  render() {
    console.log(‘example render‘);
    const { person } = this.props;
    return(
      <div>
        {person.name}
      </div>
    );
  }
}

三.若是数组和对象等引用类型,则要引用不同,才会渲染

四.如果prop和state每次都会变,那么PureComponent的效率还不如Component,因为你知道的,进行浅比较也是需要时间

五.若有shouldComponentUpdate,则执行它,若没有这个方法会判断是不是PureComponent,若是,进行浅比较

1.继承自Component的组件,若是shouldComponentUpdate返回false,就不会渲染了,继承自PureComponent的组件不用我们手动去判断propstate,所以在PureComponent中使用shouldComponentUpdate会有如下警告:

IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

也是比较好理解的,就是不要在PureComponent中使用shouldComponentUpdate,因为根本没有必要

转载:https://www.jianshu.com/p/c41bbbc20e65

原文地址:https://www.cnblogs.com/ympjsc/p/12330652.html

时间: 2024-10-29 09:17:09

React 的 PureComponent Vs Component的相关文章

React 组件之 Component PureComponent Function Component

Virtual DOM , 通过高效的Diff算法对变化的部分首尾两端做批量更新,所有的比较都是浅比较shallowEqual.谁都玩不起深比较,facebook自己都做不到~ Component :一定要配套使用shouldComponentUpdate , 否则不管props or state是否更新组件一定更新 pureComponent :当组件的props和state不变时,组件是不更新的.仅仅只需要替换component => pureComponent,零投入超高回报 functi

React.createClass和extends Component的区别

React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 React.createClass import React from 'react'; const Contacts = React.createClass({ render() { return ( <div></div> ); } }); export default Cont

[React] Close the menu component when click outside the menu

Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, this isn't enough. In this lesson, we'll rely on life

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

关于React的Container&amp;Presentational Component模型结构分析

react.js javascript 3 之前翻译了两篇关于Container&Presentational Component模型的文章,一篇是基础的Container和Component的定义,另外一篇是进阶版,因为翻译的太烂,感觉有很多错误,所以只放原文链接. 在这里我想讨论一下我自己对这个模型的一些想法. 注:便于书写,下面统一把Container&Presentational Components模型翻译为容器&展示组件模型 注:下面图片中的components文件夹指

[React] Refactor a Class Component with React hooks to a Function

We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component th

【react】---pureComponent的理解

一.pureComponent的理解  pureComponent表示一个纯组件,可以用来优化react程序.减少render函数渲染的次数.提高性能 pureComponent进行的是浅比较,也就是说如果是引用数据类型的数据,只会比较不是同一个地址,而不会比较这个地址里面的数据是否一致 浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变的时候render是不会执行的.如果我们需要重新渲染那么就需要重新开辟空间引用数据 好处: 当组件更新时,如果组件的props或者

React Native Expected a component class,got [object Object]解决

报错原因: 组件大小写错误. 解决方式: 修改组件名称即可. 这篇博客介绍了大部分RN的错误原因和解决方法: http://blog.csdn.net/chichengjunma/article/details/52943013

react之组件的shouldcomponentUpdate使用&amp;&amp;Component与PureComponent

1). Component存在的问题? a. 父组件重新render(), 当前组件也会重新执行render(), 即使没有任何变化 b. 当前组件setState(), 重新执行render(), 即使state没有任何变化 测试代码如下,首先是a情况 /**父组件 */ import React, { Component } from 'react' import Child from './Child' class Parent extends Component { state = {