Feature points after React16 have been added gradually in multiple versions. This article is based on version 16.6.0. The main purpose of this article is to introduce the new or modified features in versions after React16, so this article assumes that you have a good understanding of the features in versions prior to React16. Needless to

An overview of the update

React V16.0 to React V16.6

  • The React v16.0
  1. renderSupport for returning arrays and strings
  2. Support for custom DOM attributes
  3. Reduce file size
  • The React v16.3
  1. createContext
  2. createRef
  3. Updates to life cycle functions
  • The React v16.4

Update getDerivedStateFromProps

  • The React v16.6
  1. memo
  2. lazy
  3. Suspense
  4. static contextType
  5. static getDerivedStateFromError
  • React V16.7 (~Q1 2019)

Hooks

Next, we will explain the influential and frequently used update points one by one.

PureComponent of pure functions

We know that the React component shouldComponentUpdate function is important for optimizing the React component’s performance. That’s why React added the React.pureComponent. But there is no added convenience for writing pure functions that are not class classes. For this issue, React16.6 adds a higher-level component called react. memo

General usage:

const C = React.memo(props= > {
  // xxx
})
Copy the code

The react. memo implementation is similar to the react. PureComponent, so it internally makes shallow comparisons of objects. React.memo allows you to customize the comparison method as follows:

// The component is updated if the function returns true, and not if it returns otherwise
const equalMethod = (prevProps, nextProps): boolean= > {
  // Define your comparison logic
}
const C = React.memo(props= > {
  // xxx
}, equalMethod)
Copy the code

What is the new life cycle function

The React lifecycle is divided into three phases: mount, update, and uninstall.

mount

The execution order of the life cycle

  1. constructor
  2. static getDerivedStateFromProps
  3. render
  4. componentDidMount

Render and componentDidMount are unchanged from before Act16. For the mount process, we focus on Constructor, componentWillMount, and static getDerivedStateFromProps.

constructor

  1. Initialize the state

    Note: Should be avoidedpropstostateAssignment, in which case,stateInitialization of theconstructorThe outside processing
constructor(props) {
  super(props);
  this.state = {
    x: 1.// y: props. Y, // Don't do this}}Copy the code
  1. Bind this to the method
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
Copy the code

However, the above two things are easier to handle outside of constructor as follows:

class C extends React.Component {
  state = {
    x: 1
  }
  handleClick = (e) = > {
    // xxx}}Copy the code

As a result, there will be fewer scenarios using Constructor after React16.

componentWillMount

React doesn’t remove the life cycle function, only to warn developers that it will be deprecated in future releases. Where do you do what you did in this life cycle?

First of all, ask yourself the question, what were you doing in this life cycle originally? The answer is that most of the time you do AJAX requests here, and then you do setState to re-render.

However, making AJAX requests in componentWillMount is a bad idea because for homogeneous projects, componentWillMount will be called.

Someone else will initialize state in this. For state initialization, see the upstairs section.

In summary, componentWillMount actually has no major function, if your code specification, remove it, will not have any impact on the current project.

static getDerivedStateFromProps

We said that we should avoid assigning to state using props, but that’s what we did up until React16. If we don’t do that now, where do we handle this logic? The answer given by Act 16 is static getDerivedStateFromProps. This static method is executed before Render when the component is mounted; This static method is executed before shouldComponentUpdate when the component is updated.

class C extends React.Component {
  state = {
    y: 0
  }
  static getDerivedStateFromProps(props, state): State {
    if(props.y ! == state.y) {return{ y: props.y }; }}}Copy the code

The return value of getDerivedStateFromProps will be used as the setState argument. If null is returned, the state will not be updated and a value other than Object or NULL will not be returned, otherwise a warning will be issued.

GetDerivedStateFromProps is a static method and does not get instances of this, so developers should design this as a pure function.

So, find componentWillReceiveProps there would be no place? Yes, React16 “deleted” it as well. (This is problematic because React doesn’t actually remove the lifecycle function, only to warn developers that it will be deprecated in future versions. Better getSnapshotBeforeUpdate or getDerivedStateFromProps is recommended.)

update

The order in which lifecycle functions are executed

  1. static getDerivedStateFromProps
  2. shouldComponentUpdate
  3. render
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate

Static getDerivedStateFromProps was introduced earlier, and the other lifecycle functions are basically the same as they were before React16, so here we’ll focus on getSnapshotBeforeUpdate.

getSnapshotBeforeUpdate

Called before React updates the DOM, at which point state is updated; Return the value as the third argument to componentDidUpdate; Usually used to get DOM data before render

Grammar:

class C extends React.Component {
  getSnapshotBeforeUpdate (prevProps, prevState): Snapshot {
    
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // snapshot is the return value from getSnapshotBeforeUpdate. The default is null}}Copy the code

GetSnapshotBeforeUpdate is used to get the scrollbar position before the build update.

uninstall

componentWillUnmount

No change from before.

abnormal

ComponentDidCatch is a function new to React16 that catches exceptions to the component tree and fires if the Render () function throws an error. It can be understood and used in terms of try catch, wrapping error-prone components with wrapped components that contain the Life cycle of componentDidCatch where errors can occur.

class PotentialError extends React.Component {
  state = {
    error: false,
  }
  componentDidCatch(error, info) {
    console.error(info);
    this.setState({
      error
    });
  }
  render() {
    if (this.state.error) {
      return <h1>Error, please punch the console to view the details of the error!</h1>;
    }
    return this.props.children; }}Copy the code

Such as:

const Demo = (a)= > (
  <PotentialError>
    <div>{{a: 1}}</div>
  </PotentialError>
)
Copy the code

This way, the Demo component will not report an error even if it uses an object directly as a child, because PotentialError is received.

Full demo of the new life cycle

See what it looks like in your new life cycle clothes

import React from 'react'

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state (1)
    this.state = {

    }
  }
    
  static defaultProps = {

  }

  // Initialize state mode (2)
  state = {

  }
  static getDerivedStateFromProps(props, state) {
    return state
  }
  componentDidCatch(error, info) {

  }
  render() {

  }
  componentDidMount() {

  }
  shouldComponentUpdate(nextProps, nextState) {
    
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {

  }
  componentDidUpdate(prevProps, prevState, snapshot) {

  }
  componentWillUnmount() {

  }

}
Copy the code

Suspense

Hooks

time slicing

【 To be continued 】