This is the 13th day of my participation in the More text Challenge. For details, see more text Challenge

Three states of the life cycle:

Mounting: Insert the components into the DOM

Updating: Updating data to the DOM

Unmounting: Remove components from the DOM

Hook functions (methods, events) in the lifecycle

CompontWillMount: The component will be rendered

CompontDidMount: Component rendering is complete

CompontWillReceiveProps: the component is going to receive props data

ShouldComponentUpdate: component receives new state or props, determines whether it was updated, and returns a Boolean value

CompontWillUpdate: The component is to be updated

ComponentDidUpdate: The component has been updated

ComponentwillUnmount: Components are to be unmounted

Major life cycles

• constructor

  • Triggered when a component is instantiated, usually to do the initial work on the component, such as setting state

• render

  • Triggered when the component starts rendering
  • Fired when the component is updated (state and props changed)

• componentDidMount

  • After the component is mounted, it can send asynchronous requests for data

• componentWillUnmount

  • Triggered when a component is uninstalled
  • Usually used to clear timers or unsubscribe
import React from 'react' import ReactDom from 'react-dom' class ComLife extends React.Component { constructor(props) { Super (props) // Call the constructor of the Component inheritancethis. State = {MSG: 'hello world'} console.log('constructor ') // 1} componentWillMount() {console.log('componentWillMount ') / / 2} componentDidMount () {the console. The log (' componentDidMount component rendering is') / / 4} componentWillReceiveProps () { The console. The log (' componentWillReceiveProps components that will receive the new state and props')} componentWillUpdate () {the console. The log (' componentWillUpdate } componentDidUpdate() {console.log('componentDidUpdate ')} componentWillUnmount() {componentWillUnmount() { Console. log('componentWillUnmount ')} console.log() {console.log('componentWillUnmount ') // 3 return (<div> <h1>hello World </h1> </div>); // constructor // componentWillMount // render // componentDidMount //  ReactDom.render(<ComLife />, document.getElementById('root'))Copy the code

When components, etc., update values

Import ReactDom from 'React' import ReactDom from 'react-dom' class ComLife extends React.Com { Constructor (props) {super(props) // this. State = {MSG: 'hello world'} console.log('constructor ') // 1} componentWillMount() {console.log('componentWillMount ') / / 2} componentDidMount () {the console. The log (' componentDidMount component rendering is') / / 4} componentWillReceiveProps () { The console. The log (' componentWillReceiveProps components that will receive the new state and props')} / / update controller shouldComponentUpdate () {/ / if you want to update, it returns true, If (this.state. MSG == 'test ') {//eslint-disable-line return true} else {return false}} ComponentWillUpdate () {console.log('componentWillUpdate ')} componentDidUpdate() {componentWillUpdate() {console.log('componentWillUpdate ')} componentDidUpdate() { } componentWillUnmount() {console.log('componentWillUnmount ')} Render () {console.log('render function ') // 3 return (<div> <h1>{this.state.msg}</h1> <span onClick={ Enclosing onChangeComponentMount} > update data < / span > < / div >)} onChangeComponentMount = () = > {enclosing setState ({MSG: // constructor // componentWillMount // Render // componentDidMount // ReactDom.render(<ComLife />, document.getElementById('root'))Copy the code

1. Mounting and unmounting process

1.1. The constructor ()

React data is initialized with constructor(). It takes props and context, which are passed in with super() when you want to use them inside a function.

Note: Whenever constructor() is used, you must write super(), otherwise this will point to an error.

1.2.com ponentWillMount ()

ComponentWillMount () is generally used less, it is more used when the server side rendering. It represents the process when the component has undergone data initialization by Constructor (), but has not yet rendered the DOM.

1.3.com ponentDidMount ()

When the component is rendered for the first time and the DOM node has been generated, the Ajax request can be called from here and the component will be rerendered after the setState data is returned

1.4.com ponentWillUnmount ()

This is where components are uninstalled and data is destroyed.

  1. Clear all setTimeout,setInterval in your build
  2. Remove the listener removeEventListener from all builds
  3. Sometimes we come across this warning:

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

The reason is that your Ajax request in the component returns a setState, but when your component is destroyed, the request is not complete, so a warning is reported

Solution:
componentDidMount() { this.isMount === true axios.post().then((res) => { this.isMount && this.setState({ // }} componentWillUnmount() {this.ismount === false}} {this.ismount == false}}Copy the code

2. Update process

2.1. componentWillReceiveProps (nextProps)

  1. This is used more often when the props need to re-render the component after receiving a change from the parent component
  2. Take one argument, nextProps
  3. By comparing the nextProps to this.props, the state of the nextProps is the state of the current component, thus rerendering the component
componentWillReceiveProps (nextProps) { nextProps.openNotice ! = = this. Props. OpenNotice && enclosing setState ({openNotice: nextProps openNotice}, () = > {the console. The log (this. State. OpenNotice: nextProps) / / renew for nextProps state, in the second parameter (the callback) setState can print out the new state})}Copy the code

2.2. ShouldComponentUpdate (nextProps nextState)

1. Mainly used for performance optimization (partial update)

2. This is the only life cycle used to control component rerendering. In React, if the state changes after setState, the component will enter the rerendering process

3. Because the rerendering of the React parent component will result in the rerendering of all its children, we actually do not need to rerender all the children at this time, so we need to make a judgment in the life cycle of the children

2.3.com ponentWillUpdate (nextProps nextState)

ShouldComponentUpdate returns true, componentWillUpdate (), nextProps and nextState ().

2.4.com ponentDidUpdate (prevProps prevState)

React: Props and prevState: props and prevState: props and prevState: Props and prevState: Props and prevState: Props and prevState: Props and prevState: Props and prevState

2.5 render ()

The Render function will insert the DOM structure generated by JSX, and react will generate a virtual DOM tree. When each component is updated, React will compare the old and new DOM trees before and after the update through its diff algorithm. After the comparison, react will find the smallest dom node with differences and re-render it.

People are lazy, do not want to picture, are their own blog content (dry goods), hope to help everyone

Public number: xiao He growth, The Buddha department more text, are their own once stepped on the pit or is learned

Interested partners welcome to pay attention to me, I am: He young life. Everybody progress duck together