The React based

The life cycle

1. constructor

Constructor is a generic constructor for a class that is often used for initialization as part of the lifecycle. In later versions of React, class components can also be omitted.

Note: When used in constructors, the super keyword appears alone and must be used before the this keyword. The super keyword can also be used to call functions on parent objects. MDN instructions

  class JJTest extends React.Component {
      / / constructor notation
      constructor(props) {
        super(props);
        this.state = {
          count: 0};this.handleClick = this.handleClick.bind(this);
      }
      // Direct declaration
      state = {
        count: 0}; }Copy the code

2. getDerivedStateFromProps

Trigger timing: state change, props change, forceUpdate, as shown in the figure above.

This is a static method, a role that is “independent” of the component itself. In this static method, you cannot access data on any component except for the two default positional parameters nextProps and currentState.

// when initialized/updated
static getDerivedStateFromProps(nextProps, currentState) {
  console.log(nextProps, currentState, "GetDerivedStateFromProps method execution");
  // The return value is currentState modified
  return {
    fatherText: nextProps.text,
  };
}
Copy the code

3, render

The RENDER function returns a JSX structure that describes the specific render. When render is called, it checks for changes to this.props and this.state and returns one of the following types:

The React elements. Typically created through JSX. For example,

React renders it as a DOM node, and React renders it as a custom component, either

React elements again.

Arrays or fragments. Enables the Render method to return multiple elements. For more details, see the Fragments document.

Portals. You can render child nodes into different DOM subtrees. For more details, see the documentation on Portals

A string or numeric type. They are rendered as text nodes in the DOM

Boolean type or NULL. Nothing is rendered. (Mainly used to support patterns that return test &&, where test is a Boolean type.)

Note: If shouldComponentUpdate() returns false, render() is not called.

Hooks do not need to write the render function. React. XXX. Import React from “React” in this component even though Hooks do not need to write render; (As for the reason, which is in the following deep Hooks, which we can also explain). React officials have also stated that this will be removed in future versions.

4, componentDidMount

It is used to perform certain operations, such as initiating network requests or binding events, when the component is loaded. Mounted vue mounted

SetState () is called directly in componentDidMount(). It will trigger an extra render, which is two render times, but it’s not a problem, mainly to understand.

5, shouldComponentUpdate

This method determines whether a new render needs to be triggered by returning true or false. Because rendering triggers the last level, it is also a battleground for performance optimization. Prevent unnecessary rendering by adding judgment criteria. Note: This method is not called the first time you render or use forceUpdate().

React officially provides a generic optimization called the PureComponent. The core principle of PureComponent is to implement shouldComponentUpdate by default, which uses a shallow comparison between props and state to determine whether to trigger an update.

Of course, PureComponent has its drawbacks. Use it with caution: shallow comparisons can lead to false negative judgments due to deep data inconsistencies, which can result in pages not being updated. Not suitable for use in state and Prop with multiple layers of nested objects.

shouldComponentUpdate(nextProps, nextState) {
  Shallow comparisons only compare values and references, not every value in Object
  if (shadowEqual(nextProps, this.props) || shadowEqual(nextState, this.state) ) {
    return true
  }
  return false
}

Copy the code

6, getSnapshotBeforeUpdate

Called before DOM updates, the return value will be the third argument to componentDidUpdate.

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("GetSnapshotBeforeUpdate method executed");

    return "Third parameter for componentDidUpdated";
}
Copy the code

7, componentDidUpdate

This method is not performed for the first rendering. You can use setState, which triggers rerendering, but you must be careful to avoid endless loops

componentDidUpdate(preProps, preState, valueFromSnapshot) {
    console.log("ComponentDidUpdate method execution");

    console.log("The value obtained from getSnapshotBeforeUpdate is", valueFromSnapshot);
  }
Copy the code

8 componentWillUnmount.

It is mainly used for untying some events and clearing resources, such as canceling timers and unsubscribing events

JSX

1. Circular lists

While JSX uses a map to render the list loop class, vue writes v-for in template

{
  list.map((item, index) = > {
    return <AppCard key={index} title={item.title} onClick={item.onClick} />;
  });
}
Copy the code

2, style,

1. className

It is possible to write a separate class; dynamic concatenation requires the classNames library

import style from './style.css'

<div className={style.class1 style.class2}</div>
Copy the code

2. style

Note: The two parentheses (the style is parsed as an object), similar to the style property of the -link, need to be converted to the small hump notation

<div style={{ marginTop: 8}} > style < / div >Copy the code

3. CSS isolation

For U1S1, CSS isolation is vue scoped

Css-module create-react-app has built-in CSS Modules, which is similar to Vue scoped by adding hash values to generated classes

// style.module.css
.text {
    color: blue
}
// app.tsx
import s from "./style.module.css";
class App extends Component {
  render() {
    return <div className={s.text}>css-module text</div>; }}/ / the compiled
.text_3FI3s6uz {
    color: blue;
}

Copy the code