React Tutorial (i) JSX syntax, component concepts, life cycle Introduction

JSX

React, introduced a new syntax named JSX, it gives JS in the ability to write HTML tags, do not need to add quotation marks. JSX's syntax seems to be a template, but after compiling it, it turns into a JS syntax, just a syntactic sugar in the process of writing.
JSX's parser will help us read this syntax and deal with it.
The following is a simple example.

const element = 

This is actually equivalent to the following code:

const element = React.createElement({ ‘h1‘, {className: ‘greeting‘}, ‘Hello, world!‘, ‘Xxx‘})

The first parameter is the type, either the HTML tag or the React component, the second parameter is the props object, and the third argument is children, which is arranged in the order in which they are passed in.
Of course, the third parameter can also pass in the array, if the third argument passed in the array, then the other child nodes, will be an error.
JSX provides the ability to write HTML and JS mixes. In places where you need to use a JS expression, wrap it up with a set of curly braces:

function formatName(user) { return user.firstName + ‘ ‘ + user.lastName;}const user = { firstName: ‘Harper‘, lastName: ‘Perez‘};const element = ( 

Because the class in JS keyword, so use classname to replace.
It says that JSX is actually a syntactic sugar, so if you want to loop through the list, you can simply pass in the list:

const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li>{number}</li>);ReactDOM.render( <ul>{listItems}</ul>, document.getElementById(‘app‘));

You will see this error in the console:

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

This is because react uses virtual DOM to render the real node, and when the list is rendered, it is very slow if each item does not have a corresponding key,react processing, so it is best to add a unique key to each item when the list is rendered.

const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);

Component

The most important concept in react is the component.

Conceptually, components is like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

A component can be seen as a function that specifies the input (props) and gives the output (a REACT element).
There are two ways of creating a component:
1. Functions

function Welcome(props) {  return 

Class of 2.ES6

class Welcome extends React.Component { render() { return 

The second method creates a component that can have internal state and life-cycle functions.
You can choose the first function method if you just display the information and do not have a complex operation. If the components are complex and need to be initialized or destroyed at different times, the second ES6 class method is used.

Status (state)

State is similar to props, but it is private to the component and is fully controlled by the component.
Let's demonstrate the concept of state by combining a clock class.

import React, {Component} from ‘react‘;export default class Clock extends Component {  constructor(props) {    super(props);    this.state = {date: new Date()};  }  render() {    return (      <div>        

In this component, the clock has its own state, not the incoming from the outside. Next we add a timer function to introduce the life cycle.

import React, {Component} from ‘react‘;export default class Clock extends Component { ... componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID) } tick () { this.setState({date: new Date()}) } ...}

Note: In react, invoking the SetState method to modify state will trigger changes to the view layer, and setting the state directly will not trigger the state modification.
The above introduces two life cycle methods:componentdidmount , componentwillunmount .
Componentdidmount fires after the component is mounted on the DOM node, and Componentwillunmount fires after the component is removed from the node.
React there are many life cycle methods, here's a detailed explanation.

Life cycle

In react, a component may experience creating, mounting, updating, unloading, destroying these events, and react provides us with a hook function to operate on when these events are triggered.
His life cycle can be divided into three major parts:
Create , update , and destroy .
When you create a component and insert it into the DOM, the following method fires sequentially

constructor()static getDerivedStateFromProps()render()componentDidMount()

When it is updated, it will trigger

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

When uninstalled, triggers

componentWillUnmount()

For a more intuitive view of the life cycle approach, you can refer to this diagram:

Image source: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/.
The render phase, which performs some state and props calculations.
The commit phase is to insert the react component onto the real DOM node, which can be used in the DOM.
The Pre-commit stage is the ability to read the DOM before inserting the real DOM.

constructor at creation time

1. Used to initialize props and state.
2. Is the only place where you can modify the state directly.

Getderivedstatefromprops

1. Use when state needs to be initialized from props
2. Try not to use: because maintaining the consistency of both will increase the complexity of
3. will be called before each render
4. Typical scenario: Form controls get default values

Render

Not missing, it actually determines what the component is going to look like.

Componentdidmount

1. Triggers after UI rendering is complete
2. Execute only once
3. This method usually triggers an AJAX request.

When updating

There are three scenarios that trigger update.
Props has changed, setstate execution, forceupdate execution.

ForceUpdate

The first two do not say, the third forceupdate trigger scene is relatively rare, if the Render method uses data other than props and state, this method is required.
Here is an example.

Shouldcomponentupdate

1. Decide if the virtual DOM will redraw
2. Can be automatically implemented with pure component
3. This method is used to perform performance optimization related operations. Sometimes the update of state and props does not affect the presentation of the DOM, and there is no need to render the DOM again.

Getsnapshotbeforeupdate

1. Triggered before updating the DOM, State has been updated
2. It can pass the state of the previous DOM to Componentdidupdate and then update the DOM after the calculation processing.
Here's an example.

Componentdidupdate

1. Each UI update will be called
2.props or state will trigger after modification

When uninstalling

This phase will only trigger a method.

Componentwillunmount

1. Call only once
2. You can clear the timer in this method, close some connections and so on.

The above is the introduction of JSX, component concept, props, state, and life cycle.
Thanks for reading.

React Tutorial (i) JSX syntax, component concepts, life cycle Introduction