React native one of the learning notes

1: Run React native report connection error resolution

How to resolve:

Enter the project file in the terminal and execute: (CD pods/react; npm run start)

2: Introduction to the component life cycle

Create phase
1, Getdefaultprops

Called when the component class is called React.createclass ().
Each time the component is created and executed only once, such as reload Js.

The default value used to process props.

Note:
If a component is defined in the JS file, but it is not used, the getdefaultprops of this component is also called.
The props is not allowed to be modified inside the component, but can only be modified by calling her parent component, which is to pass values from the parent component to the current component, and to use or present the value inside the component.

Instantiation Phase
An instance that acts on a component and executes when the component is called
2,getinitialstate
Initializes the component's state value, and the return value is assigned to This.state.
The function is equivalent to the constructor of the custom control and the initialization of the member variable.

3,Componentwillmount
Called before the component starts rendering render .
So the control shows the logical processing before it, which should be implemented in this function.
The function corresponds to the OnCreate method in the fragment life cycle .

4.Render
Based on the value of state, the rendering is started, a virtual DOM is generated, and returned.
The controls and initial values required by the component are defined here.
function equivalent to an XML resource file in the MVVM development pattern.
return value:null,false, return view structure

5,Componentdidmount
called immediately after the initial render method call.
In this method, the parent component can access any reference to the child component.
The Componentdidmount method of the child component is called before this method of the parent component.
Operations such as network requests, event subscriptions, and so on, can be called in this method.
The Onviewcreate method with the same function and fragment life cycle .

The above is the entire life cycle of creating a component and not updating the component data.

Update Phase
6, Componentwillreceiveprops
Props after receiving the update.
If props is not updated, this method is not called.

7,Shouldcomponentupdate
When the value of state changes, this method is executed first, and the return value is True/false, which determines whether to perform the update operation, that is, whether to perform render rendering.
So you can encode in this method whether the logic is re-rendered when the state changes.

8, Componentwillupdate
Perform the processing that needs to be done before updating the Render method.
With the Componentwillmount method, you can modify the state value.

9, Componentdidupdate
Component updates are synchronized to the DOM and can be manipulated in the DOM .

Destruction Phase
10,Componentwillunmount
The final step in the component life cycle, the component will go to the end of life,^_^, this is what we need to do some recycling work.
such as canceling event binding, shutting down network connections, and so on.

3: Component Life cycle Flowchart Introduction

Summary

A, after the component is created, if it is not called, only the Getdefaultprops () method is called.  

The b, Componentwillmount(), and Componentwillupdate() methods, which are the last method before the render call, can be used to handle this.state assignment operations and business logic.

C, because the this.state state changes, the component will be re-rendered, therender () method will execute, so do not change the this.state value in the render operation, only to display. The responsibility is likely to cause cyclic rendering, causing the program to crash.

4:webstorm hack

Version is 2016.2.1, input http://idea.imsxm.com/to activate;

5: Press Cmd+r when using react-native can't refresh simulator?

The emulator's keyboard attempts to call up the line. So the button will work, refresh.

6:justifycontent and Alignitems

The justifycontent is aligned with respect to the spindle, while the Alignitems is aligned with respect to the intersection axis.

So how is this spindle and cross-axis determined? Beginners will think that the horizontal direction is the spindle, the vertical direction is the cross axis; wrong! The spindle and the cross axis are relative to the value of the flexdireaction, the spindle and the cross axis are relative to the value of the flexdireaction, and the spindle and the cross axis are relative to the value of the flexdireaction.

flexdireaction Spindle Cross Axis   

Row Horizontal Direction vertical direction

Column vertical Horizontal direction

React native one of the learning notes