This is the 27th day of my participation in the August More Text Challenge

Before React V16.8.0, we used to use React.Component to create components. How did React.Com Ponent come about?

React.Component

In the above source we can see:

  • A Component constructor is created and defined inside itprops context refs updaterFour private properties.
  • It is then defined on its prototype objectisReactComponentObject,setStateMethod,forceUpdatemethods
  • We then created the React component in the project using the es6 class inheritance as follows:
import React from 'react';

export default class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        console.log(this.'this object')
        return (
            <div>app</div>)}}Copy the code
  • Because we inherit react.componentwhen we create our custom components, we can use the methods and properties on the Component constructor prototype object in the components we create. See below:

React.PureComponent

From the above source, we can see:

  • const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy())Component is not directly inherited here to avoid inheriting Component’s Constructor method. The goal is to reduce some memory usage.
  • Object.assign(pureComponentPrototype, Component.prototype)This is optimized to shallow copy the ComponentPrototype property to pureComponentPrototype to prevent the stretching of the prototype resulting in multiple method searches and reduced query times
  • And finally addedisPureReactComponentProperty to distinguish the Component from the PureComponent

PureComponent is also a way to create components. It can be used to optimize components to improve performance by reducing unnecessary updates. Each update automatically compares the props and state before and after the update to determine whether to perform the update. This is a shallow comparison

  • Shallow comparison: Compares the value of the underlying type and the reference address of the reference type
  • ShallowEqual is used in the shallow comparison source of PureComponent, while object.is () is used in this method.

Object.is()

  • Object.is()Method, is a new method in ES6. The main useTo compare whether two values are strictly equal, basically the same behavior as the strict comparison operator (===).
  • There are only two differences: one is+ 0Is not equal to0And the other isNaNIs equal to itself.
+0= = = -0 //true
NaN= = =NaN // false

Object.is(+0, -0) // false
Object.is(NaN.NaN) // true
Copy the code