React Study Notes 3

The life cycle life cycle of react is divided into three phases 1.mounted (when initialized)

When we see the page element changed from JSX to DOM node, the React component is loaded (mounted) into the page

2.update (component is in operation if state and property changes)

When the data in the react component changes, the page needs to be re-rendered (when the page element is re-updated, for example, the data obtained this time is different from the last data, the page data needs to be re-updated), and the react component needs to be re-rendered once

3.unmount (component unload and destroy status)

When components need to be discarded and destroyed from the page, the react component needs to be removed from the page

React defines different events to monitor the status of these three different stages of a state hook function

When some state in the program changes, the program immediately notifies the corresponding processing function to deal with, this function is the hook function

What hook functions are react encapsulated in these three states? Functions in the mounted state (the hook function at the time of initialization)

1.getDefaultProps ()

Set the internal properties of the component (typically used to set constants inside the component), for example, to request an AJAX, the requested URL can be set to internal properties, because the URL is constant. Return object

2.getInitialState ()

Sets the state inside the component. Return object

3.componentWillMount ()

When the component is about to load, you can get Ajax data at this point and parse it.

4.render ()

Default. Back to JSX

5.componentDidMount ()

The status of the mount when the component has finished loading. Like what:
1. Get the actual DOM node after rendering
2. Calling third-party plugins

The above five hook functions are executed in the order ordinal, the sample code is as follows:

1 varCompo =React.createclass ({2Getdefaultprops:function(){3Console.log ("1 Get Props")4 return {}5 },6Getinitialstate:function(){7Console.log ("2 Get State")8 return {}9 },TenComponentwillmount:function(){ OneConsole.log ("3 would mount") A }, -Renderfunction(){ -Console.log ("4 Render") the return( -<div> -This is render! -</div> + ) - }, +Componentdidmount:function(){ AConsole.log ("5 Did Mount"); at } - }) -Reactdom.render (<compo/>,document.getelementbyid ("example"));

Run results

Easy error: Render is only responsible for rendering, each time the data refresh calls the Render function

Functions in the update state (the hook function in operation)

1.componentWillReceiveProps (Nextprops)
This function is called when the component receives a new props, and then modifies the current props

2.shouldComponentUpdate (Nextprops,nextstate)
Give the developer a permission to invoke render rendering when new props and state are received, and to write some logic to control the update of the data. Returns a Boolean

3.componentWillUpdate (Nextprops,nextstate)
Before the component is re-rendered, the last props and state are changed before rendering, and this function uses very little, typically used in logs and records for printing

4.componentDidUpdate ()
Called when the component has been re-rendered.

Conditions in which the life cycle function is triggered in a component run:

1. When the parent component modifies the props properties of a subassembly
2. When the component itself modifies the status state

Functions in the Unmount state (hook function when unloaded)

Componentwillunmount ()
Called when a component is about to be unloaded, this function is rarely used because the browser itself has a garbage collection mechanism

Summary react all life cycle hook functions are seldom used in development

React Study Notes 3