React Native Study Notes

React is a tool that uses ES6, supports JSX syntax, and develops a modular web or native. At this stage, use the Babel tool to convert to ES5 code.

Components pass unchanged content through the props property, and the UI changes as a result of the State property change.

React an interface framework, data management in JS is more troublesome, prone to confusion. There is a Redux library that can manage a unified data storage point. An app has only one store object, and the inside is a global variable that can be accessed anywhere.

Three Concepts of Redux:

container, reduce, actions.

1. Create container, container is a concept that contains business logic code that is responsible for data display filtering and event binding. The actual use of Connect is automatically created.

Consists of two methods Mapstatetoprops and Mapdispatchtoprops. The last line of code, connect (mapstatetoprops,mapdispatchprops) (UIComponent), has two parentheses, the first one writes the two defined methods, and the parentheses below write the props in which UI component class to use.

2. Reduce is a function that can pass two parameters (State,action) and return the changed state. The core concept is to not directly modify the state value, and to create a new object return by Object.assign ({},state,{New Value property to overwrite}).

3. Actions are actions that are performed by some functions, and the method name can be defined as addnews,listnews,delnews, which actually directly returns a {key: "Add_news", "Other": "DFDSFDSF"}, In addition to key, you can define parameters that are passed to the event handler.

4. How do I trigger an action?

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

5. Events in the component are best written in the form of closure, other forms may not be able to find methods or the like, the principle is that this is not required this causes.

Closure notation:

var clickgetuserinfo = (id) = = {

This.refs.uiEle.text = "23421323"

}

Render () {

<view Onclick={clickgetuserinfo} ref= "Uiele" >

}

React Native Study Notes