One of React Native study notes, reactnative

One of React Native study notes, reactnative

1. Run React Native to report a connection error.

Solution:

Enter the project file on the terminal and execute: (cd Pods/React; npm run start)

 

2: component lifecycle

Creation phase
1. getdefaproprops

It is called when calling React. createClass.
Execute each time you create a component and only execute it once, for example, reload Js.

The default value used to process props.

Note:
If a component is defined in the JS file but is not used, the getDefaultProps of this component will also be called.
The props cannot be modified inside the component. It can only be modified by calling its parent component, that is, passing values from the parent component to the current component, use or display this value within the component.

 

Instantiation phase
It acts on the instance of the component and is executed when the component is called.
2. getInitialState
Initialize the state value of the component. The return value is assigned to this. state.
The function is equivalent to the initialization of the constructor and member variables of the custom control.

3. componentWillMount
The component is called before rendering render.
Therefore, the logic processing before the control display should be implemented in this function.
The role is equivalent to the onCreate method in the Fragment lifecycle.

4. render
Starts rendering based on the value of State, generates a virtual DOM, and returns it.
The controls and initial values required by the component are defined here.
The role is equivalent to the Xml resource file in MVVM development mode.
Returned values: null, false, and View structure.

5. componentDidMount
Call immediately after the initial render method is called.
In this method, the parent component can access any reference of the Child component.
The componentDidMount method of the child component is called before the method of the parent component.
Network requests, event subscriptions, and other operations can be called in this method.
Same as the onViewCreate method in the Fragment lifecycle.

The preceding section describes the entire lifecycle of a component without updating its data,

 

Update phase
6. componentWillReceiveProps
Receive the updated props.
If props is not updated, this method is not called.

7. shouldComponentUpdate
When the value of state changes, execute this method first. The return value is true/false to determine whether to perform the update operation, that is, whether to perform render rendering.
Therefore, you can encode the logic of re-rendering when the state changes.

8. componentWillUpdate
The processing that needs to be done before the render method is updated.
Same as the componentWillMount method, you can modify the state value.

9. componentDidUpdate
The update of the component has been synchronized to the DOM. You can perform DOM operations.

 

Destruction stage
10. componentWillUnMount
In the last step of the component life cycle, the component will come to the end of its life, ^ _ ^, which is something we need to do for recycling.
Such as canceling event binding and disabling network connections.

 

3:Component lifecycle Flowchart

 

 

Summary

A. After a component is created, if it is not called, only the getdefaproprops () method will be called.

B. The componentWillMount () and componentWillUpdate () methods are the last method before render calls. They can be used to handle this. state Assignment operations and business logic.

C. Because the state of this. state changes, the component will be re-rendered, and the render () method will be executed. Therefore, do not perform the this. state value change operation on render for display only. It is very likely to cause loop rendering and program crash.

 

4: webStorm cracking

The version is 2016.2.1. Enter http://idea.imsxm.com/to activate the service;

 

5: Why can't I refresh the simulator by pressing cmd + r when using react-native?

Just refresh the keyboard of the simulator. In this way, the buttons will work and refresh.

 

6: justifyContent and alignItems

JustifyContent is the alignItems alignment to the cross axis.

So how can we determine the spindle and cross axis? Beginners will think that the horizontal direction is the spindle, and the vertical direction is the cross axis. Wrong! The spindle and cross-axis are relative to the flexDireaction value. The spindle and cross-axis are relative to the flexDireaction value, and the spindle and cross-axis are relative to the flexDireaction value.

FlexDireaction SpindleCross axis 

Row horizontal and vertical

Horizontal vertical direction of column