A minimalist handbook of React native

A primer for installation can be found at: React Native official documentation (HTTP://REACTNATIVE.CN/DOCS/0.31/TUTORIAL.HTML#CONTENT).

Nodejs Knowledge Reserve: Refer to "Nodejs" (Https://leanpub.com/nodebeginner-chinese). (For knowledge, please purchase the original).

Book: "React Native Introduction and Combat"

code example: 30-day learning React Native Tutorial (https://github.com/fangwei716/30-days-of-react-native)

See here, the use of react native have some understanding.

2 React and React Native and NodeJS

React is a JS library developed by Facebook to develop user interface. Its source code is maintained by Facebook and the community's best programmers. React brings a lot of new things, such as components, JSX, virtual DOM, and so on. The virtual DOM provided allows us to render the component very quickly, freeing us from the heavy work of frequently manipulating the DOM. It does more work on the V layer in MVC, and with other things like flux, you can easily build powerful applications.

In the React world, everything is a component. You can build any components that are not directly HTML, such as drop-down menus, navigation menus, and so on. Also, components can contain other components. Each component has a render method that is used to render the component. At the same time, each component has its own scope, which is then defined with its components to build a method that belongs to the component for reuse (app development ty300.com). JSX is a JS-based extension, which allows you to directly write HTML code in JS, rather than the same as we have in the past to write HTML in JS have to splice a lot of strings. React does not directly manipulate the DOM, and frequent manipulation of the DOM can greatly affect performance and experience. React stores the DOM structure in memory, compares it to the return value of the Render method, calculates a different place by its free diff algorithm, and then reacts to the real DOM. That is, in most cases, we render the component, change the state of the component, and so on are the virtual DOM of the operation, only to be reflected in the real DOM if there is a change. Based on Reacjs, the React native brings the ability to React programming patterns to mobile development for iOS and Android native applications.

NodeJs is a JavaScript-based language that can be developed as a background. Many system-level APIs are available, such as file manipulation, network programming, and so on. With event-driven, asynchronous programming, mainly for the background network service design. React Native creates JavaScript code with the help of node. js, the JavaScript runtime.

In summary, React native uses Nodejs to do system processing, using React to render.

3 Building Principles

In the APPDELEGATE.M, find

Application:didfinishlaunchingwithoptions:

In this approach, a few things are done:

• The location of the JS code is defined, it is a URL in the dev environment, accessed through the development server, and is read from disk in the production environment, if the bundle file has been generated manually;

• A Rctrootview object is created that inherits from UIView, the outermost layer of all View of the handler;

• Call Rctrootview's Initwithbundleurl method (Getting Started tutorial qkxue.net). In this method, a bridge object is created. As the name implies, Bridge plays a bridging role between the two ends, and the real work is that the class is the famous Rctbatchedbridge. Rctbatchedbridge is the core of communication at initialization, and our focus is on the start method. In the Start method, a GCD thread is created that dispatches the following key tasks through the serial queue.

The Rctrootview is used to load the JavaScript app and render the final view. When the app starts running, Rctrootview will load the app from the following URL:

Http://localhost:8081/index.ios.bundle

Recall the terminal window that opened when you ran the app, which opened a packager and server to handle the above request. Open that URL in Safari, and you'll see the JavaScript code for the APP. You can also find your code in the React Native framework. When your app starts running, the code will be loaded, and then the JavaScriptCore framework will execute it. In the program, it will load the functional components and then build the native UIKit view. The JavaScript app runs on the emulator, using the native UI, without any embedded browsers. The application uses React.createelement to build the app UI, and React translates it into the native environment.

When the UI is rendered, the Render method returns a view render tree and compares it to the current UIKit view. The output of this process, called reconciliation, is a simple update list, and React will apply this list to the current view. Only parts that have actually changed will be redrawn. That is Reactjs unique--virtual-dom (Document Object model, view tree for a Web document) and reconciliation concepts.

4 component life cycle

The life cycle of a component is divided into three states:

• Mounting: The real DOM is inserted

• Updating: is being re-rendered

• Unmounting: The real DOM has been removed

React provides two processing functions for each State, the will function is called before it enters the state, and the DID function is called after it enters the state, with three states totaling five processing functions.

• Componentwillmount ()

• Componentdidmount ()

• Componentwillupdate (Object Nextprops, Object nextstate)

• Componentdidupdate (Object Prevprops, Object prevstate)

• Componentwillunmount ()

In addition, the REACT provides two special state processing functions.

Componentwillreceiveprops (Object Nextprops): Called when a loaded component receives a new parameter

Shouldcomponentupdate (Object Nextprops, Object nextstate): Called when the component determines whether to re-render

For a detailed description of these methods, you can refer to the official documentation.

Another point to be concerned with is that the style property of the component cannot be set in the form

Style= "opacity:{this.state.opacity};"

and to write

Style={{opacity:this.state.opacity}}

This is because the React component style is an object, so the first significant parenthesis indicates that this is the JavaScript syntax, and the second significant parenthesis represents the style object.

Manuscripts: Diligent Learning qkxue.net

Read more about react native's minimalist handbook

A minimalist handbook of React native