This article is used to record the knowledge points encountered in learning React

React17 life cycle

Life cycle initialization mount phase – triggered by reactdome.render ()

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • ComponentDidMount () / / are commonly used

Update – triggered by internal setState() or parent’s render

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

uninstall

  • ComponentWillUnmount () / / are commonly used

Other error handling

  • static getDerivedStateFromError()
  • componentDidCatch()

What are side effects?

Pure functions

  • A certain input produces a certain output, regardless of the number of times or time of execution
  • No side effects
  • Simple function calls

For example, const add= >x+1

Side effects

  • System I/O related apis
  • Date. Now (),
  • Math.random() and other uncertain methods
  • Modifies the values of variables outside the function inside the function
  • Modifies the value of a function parameter in the function body
  • Invoke a function HTTP request that has side effects

Conclusion: Any operation with uncertainty can be interpreted as impure, and impure means side effects.

The purpose of the withRouter

The purpose of the withRouter

  • WithRouter can process generic components to have apis that are unique to routing components
  • The return value of withRouter is a new component

For example, a common layout component (left slider and right content) that does not have its own route needs to be wrapped around withRouter(Layout) if you want to obtain the routing component functionality defined in the router route.

PureComponent vs. Component

PureComponent and Component

  • Component.props (); / / render (props); / / render (props); / / render (props); / / Render (props)
  • PureComponent makes a “shallow comparison” to state,props, and reference types cannot be compared. That is, if nothing changes, render is not performed, reducing invalid rendering

Usage Scenarios:

  • Component: Known to update effectively every time
  • PureComponent: Invalid updates are known to occur

Use of React. CreatRef and ref

Ref concept:

  • Ref gets the Dom node on the Dom element
  • Ref can get an instance of the component

Usage and Usage scenarios:

  • Manage focus, text selection, media playback
  • Trigger necessary animation;
  • Integrate third-party DOM libraries

Method 1: Create a createRef

import { Button } from 'antd';
import React, { Component, Fragment } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); / / create createRef
  }
  // Define the fetch method
  getRefsData() {
    console.log(this.myRef.current.value);
  }
  render() {
    return (
      <Fragment>
        <input ref={this.myRef}></input>// Bind to the instance<Button onClick={this.getRefsData.bind(this)}>Get ref data writing method 1</Button>
        <Button onClick={()= >This.getrefsdata ()}> get the ref data</Button>
      </Fragment>); }}export default Test;
Copy the code

Method 2: Pass el as a parameter to this.myInput by calling refs

import { Button } from 'antd';
import React, { Component, Fragment } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myInput: ' '
    };
  }
  getRefsData() {
    console.log(this.state.myInput.value);
  }
  render() {
    return (
      <Fragment>
        <input ref={el= > (this.state.myInput = el)}></input>; // El is a Dom node<Button onClick={this.getRefsData.bind(this)}>Get ref data writing method 1</Button>
        <Button onClick={()= >This.getrefsdata ()}> get the ref data</Button>
      </Fragment>); }}export default Test;
Copy the code

Classification of form components – Controlled and uncontrolled components

Description: A controlled component is a component that is managed by state and can only be updated by setState(). An uncontrolled component is a form data that is processed by the DOM itself and not controlled by setState()

What is a higher-order function

A function is a higher-order function if it conforms to either of the following two specifications

  • If A function takes A function, then A can be called A higher-order function
  • A function can be called A higher-order function if the return value of the call is still A function

Common higher-order functions are Promise, setTimeout, arr.map(), and so on

Functions and precautions of keys in React/Vue

(1) The role of the key in the virtual DOM: To put it simply: The key is the identification of the virtual DOM object, and the key plays an extremely important role in the update display. React generates a new virtual DOM based on the new data when the data in the state changes. React then performs a diff comparison between the new virtual DOM and the old virtual DOM.

  • A) If the content in the virtual DOM remains unchanged, use the previous real DOM directly
  • B) If the content in the virtual DON changes, a new real DOM is generated and the previous real DOM in the page is replaced

The same key as the new virtual DOM was not found in the old virtual DOM

  • Create a new real DOM from the data and render it to the page

(2) Possible problems caused by using index as key: 1. If the data is added or deleted in reverse order, the sequence is broken:

  • Produces unnecessary real DOM updates to the ==> interface, which is fine, but inefficient

If the structure also contains the DOM of the input class:

  • Error DOM update ===> interface has problems

3. Note: It is ok to use index as key if there is no sequential operation such as adding or deleting data in reverse order and it is only used for rendering list for display

③ How to choose key in development? 1. It is better to use the unique identification of each piece of data as the key, such as ID, mobile phone number, ID number, student number, etc. 2. If you are sure to simply show the verse, index is fine

Redux and Mobx selection issues

Redux is recommended because it has a complete process template, which is easier for the team to standardize management and reduce the reading difficulties caused by the team’s coding style. It is also easier to maintain in the later stage of the project, and better query business will move to small projects: Mobx is recommended, which is easy to use and free for rapid development

See article: React Notes