foreword

When I was in college, I had a plan to learn the front end, and I also put it into action. But in the end, it failed for several hours because of a "centering" problem. Since then, I have a prejudice against the front-end things, and I have dismissed them for a long time, or I have been discouraged. Even when designing my most proud work so far, it was "smartly" designed as a pure back-end system that "borrows" ready-made pages.

But in the end, I convinced myself. No matter how wonderful the back-end technology is, it also needs the display of the front-end. Of course, the perfect interactive experience of the front end is also inseparable from the support of the back end. ——The two are complementary.

So a few months ago, I had the plan to re-learn the front-end, and this time I embraced the determination to "crack" it no matter how difficult it is. Fortunately, with the technological innovation in recent years, the cost of learning is not as high as it was then, and with an excellent framework, it is no longer so difficult to implement.

What is React

According to my study and understanding, React is a front-end framework open sourced by Facebook, which can improve the efficiency of front-end development.
For detailed introduction, please go to:

The life cycle of a React application

When I was learning many frameworks before, I didn't take the initiative to pay attention to the life cycle, but only checked when there were functions that needed to be realized with the help of the life cycle. But later I learned that the life cycle contains the realization principle of a framework, which is often what interviewers like to ask.
insert image description here
As can be seen from the figure, the life cycle of a React application is divided into four major stages:

Initialization phase:
- getDefaultProps: Get the parameters passed by the parent component, that is, constructorthe method passed in props.
- getInitialState: Get the initial state information of the component, that is, this.state={...}the initial state set for the component.
Mount phase:
- componentWillMount: Called before the component is mounted to the DOM tree, it is called only once.
- render: Renders the component, which can be called multiple times when the props or state of the component changes.
- componentDidMount: Called after the component is mounted to the DOM tree, it is called only once.
Update phase:
- componentWillReceiveProps(nextProps):nextProps is the new Props passed in by the parent component. Can be called multiple times as the props passed in by the parent component change.
- shouldComponentUpdate(nextProps, nextState): According to the comparison between nextProps and this.props, nextState and this.state, determine whether the props and state of the component have changed, that is, whether the component needs to be updated. Can be called multiple times.
- componentWillUpdate(nextProps, nextState): Called before the component is updated, nextProps, nextState represent new props and state. Can be called multiple times.
- componentDidUpdate(prevProps, prevState): Called after the component is updated, prevProps, prevState represent the props and state before the update. Can be called multiple times.
uninstall phase
- componentWillUnmount: It is called before the component is unmounted, and it is called only once.

Lifecycle method calls

In general, lifecycle methods are not commonly used. It will be used when implementing some special requirements, such as sending an asynchronous request to obtain the data to be rendered before the page is mounted.

The way to implement business logic in lifecycle methods is similar to overriding in Java, examples are as follows:

import React from 'react'

class Demo extends React.Component {
    
    
	componentDidMount(){
    
    
		// 一些业务逻辑，例如向后台请求数据，requestData
		requestData();
	}
}

Note: If business logic is inserted into a lifecycle method that can be called multiple times, then every time the method is triggered, the corresponding business logic will also be called multiple times.

Series of blog posts

React study notes (1) - review

React study notes (2) - basic implementation

React study notes (3) - routing

React study notes (4) - front-end data encryption

React study notes (5) - SCSS articles

React study notes (Fanwai 1)——Introduction to video.js video player components and experience in pit row

React study notes (Fanwai 2) - list multiple selection batch processing composite components

postscript

After a period of study and practice, I finally made my first website. It feels really good to add some functions to it every day!