React Native study notes, reactnative

React Native study notes, reactnative

React is a tool that uses ES6 and supports JSX syntax to develop componentized web or native. Now we use Babel to convert it into ES5 code.

The component passes unchanged content through the props attribute, and the UI changes through the state attribute.

React is an interface framework. Data management is troublesome and confusing in js. there is a redux library to manage a unified data storage point. an application has only one Store object and is a global variable that can be accessed everywhere.

 

Three Concepts of Redux:

Container, reduce, actions.

 

1. Create a container. The container is a concept that contains the business logic Code and is responsible for data display filtering and event binding. It is automatically created using connect.

Two methods are available: mapStateToProps and mapDispatchToProps. the last line of code connect (mapStateToProps, mapDispatchProps) (UIComponent) has two parentheses. The first one writes the two definition methods, the following brackets indicate the UI component class in which the props should be used.

 

2. reduce is a function that can pass two parameters (state, action) and return the changed state. the core concept is not to directly modify the state value through the Object. assign ({}, state, {New Value Attribute keyvalue} to be overwritten) to create a new object and return.

3. actions is a number of functions that indicate the action to be executed. The method name can be defined as addNews, listNews, and delNews. Actually, A {key: "ADD_NEWS", "other" is returned directly ": "dfdsfdsf"}, in addition to the key, you can define the parameters required to pass to the event processing.

 

4. How to trigger action?

Triggered by using the global method dispatch (action, custom parameter.

 

5. It is best to write events in components as closure. Other forms may not find methods or the like. The principle is that this is not caused by this.

Closure statement:

Var clickGetUserInfo = (id) => {

This. refs. uiEle. text = "23421323"

}

 

Render (){

<View onClick = {clickGetUserInfo} ref = "uiEle">

}