ReactNative has multiple document addresses. If your English is good enough, read the official documents. If reading the original text is difficult, the Chinese official website is also a good choice.

Here are my personal notes for beginners

prep

ReactJS: How to React Native ES6: How to Get Started with ECMAScript 6

The environment

System Environment Requirements

IOS :MacOS, Black Apple Android :MacOS, Linux, Windows

configuration

All technical learning should start with setting up the environment. There’s nothing to summarize here, but the best way to do this is to follow the instructions on how to set up the environment.

• node
• npm
• react-native-cli
• Xcode Installs Xcode IDE and Xcode command line tools (IOS development dependency)
• Android Studio download the necessary plug-ins: A) JDK1.8+ B) Show Package Details c) Android SDK Build Tools d) Android Support Repository A) ANDROID_HOME (such as running is a problem may refer to this article www.jianshu.com/p/a77396301.) b) JAVA_HOME

test

react-native init RNDemo
cd RNDemo
react-native run-iosCopy the code

If your virtual machine started, congratulations, your environment has been configured successfully! If an error occurs, you can find a solution at the end of the article.

grammar

First, you need to understand some basic React concepts, such as the JSX syntax, components, state, and props properties. You also need to have some React Native specific knowledge, such as the use of Native components.

I won’t go into the tutorial, but the official documentation explains it in detail

Let’s go straight to the code for beginners

Hello World

Tradition, getting started, Hello World

You can create a new project, overwrite your index.ios.js or index.android.js file with the code above, and run it.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.red}>Hello world!</Text>); }}const styles = StyleSheet.create({
  red: {
    color: 'red'.fontWeight: 'bold',}});// Note that the 'HelloWorldApp' in quotes must match the name of the project created by your init
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);Copy the code

RN and ReactJS use JSX and ES6 syntactically. If you are not familiar with ReactJS and ES6, please read ruan’s introduction to React and ECMAScript 6.

The difference is that RN’s syntax introduces native components as opposed to writing Web apps

import { AppRegistry, StyleSheet, Text } from 'react-native';Copy the code

RN uses JS to write native UIs, but instead of using the normal HTML tag

Just using the props and basic View, Text, Image, and TextInput components is enough to write a wide variety of UI components

style

Using the hump nomenclature as required by JSX syntax:

• font-weight -> fontWeight
• background-color -> backgroundColor

React Native dimensions are unitless and represent logical pixels independent of the device’s pixel density:

<View style={{width: 50.height: 50.backgroundColor: 'powderblue'}} / >Copy the code

The event

Event registration is no different from ReactJS

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>); }}Copy the code

The component registered here is TouchableHighlight, which component you use depends on what kind of visual feedback you want to give the user

• In general, you can make buttons or links using TouchableHighlight. Note that the background of this component darkens when the user’s finger is pressed.
• TouchableNativeFeedback is also available on Android, which creates a visual effect similar to ink ripples when a user’s finger is pressed down.
• TouchableOpacity lowers the transparency of the button when the user presses it with his finger, without changing the color of the background.
• If you want to process click events without showing any visual feedback, you need to use TouchableWithoutFeedback.

Common events are: Click: onPress long press: onLongPress zoom: maximumZoomScale, minimumZoomScale

In addition, there is a detailed explanation of Props, State, style, layout, and events in the official documentation, which is quite basic and will not be introduced here

cross-platform

‘Learn Once,Write Anywhere’ and not ‘Write Once,Running Anywhere’.

RN is not really a cross-platform language, and while you can package different components for different platforms, some components require you to write different code for different platforms. This requires us not to store up some knowledge of native development.

The working principle of

Native module

It runs on the main thread (there may be some independent background thread processing operations, which can be ignored in the current discussion). It runs object-C /Swift code on iOS platform, and Java/Kotlin code on Android platform, which handles UI rendering and event response.

JS module

The JS code running on the JS thread of the JS engine handles the business logic, including which interface should be displayed and how to style the page.

Bridge module

Native and JS modules cannot communicate with each other directly. They can only use Bridge to serialize and deserialize, search modules, call modules and other logic, and finally reflect the application

performance

React Native replaces the WebView-based framework, allowing the App to refresh at 60 frames per second (smooth enough) and have a look and feel similar to Native apps. Although the RN framework already provides this ability to balance, the choice of balancing point is up to the developer. Even Native can’t avoid the performance cost of development

Performance Impact Causes

The business logic runs on the JS thread, which is responsible for API call, event processing and state update, while the change of event response UI occurs on the main thread. The frequency of 60 frames /s requires that the response processing of each frame is only 16.67(1000/60)ms. If it exceeds 16.67ms, frames will be lost. If the frame loss exceeds 100ms, there will be a significant lag phenomenon. So reducing the computation cost per frame can improve performance.

Performance affects the cut surface

UI event response: Small impact on performance UI update: THE JS side will synchronize a large number of UI structures and data to the Native side. As the interface is complex and the data changes greatly, or animations and changes frequently, performance problems are easy to occur. UI event responses and UI updates occur at the same time: if either type of event takes up too many threads, the other type of event will not respond in a timely manner, which is an application stuttering

Common points that affect performance

Console, ListView, Animated

Performance optimization

After years of development and optimization, JS and Native can run efficiently and quickly in their respective module threads. The bottleneck of performance is mainly in the Bridge module. Especially, frequent calls between JS and Native modules will lead to too much pressure on the Bridge, resulting in lag

1. React uses the Diff algorithm of the Virtual Dom to minimize the data that needs to be synchronized, and makes proper use of the setState method
2. In case of animation performance problems, you can use the Annimated class library to send the declaration of how to change to the Native side at once. The Native side is responsible for the following UI updates based on the received declaration. You don’t need to synchronize data for every frame of UI change.
3. Mix Native and JS to make a large number of components into Native components
4. At the same time as UI event responses and UI updates, you can use the Interaction Manager to schedule work that takes longer until all interactions or animations are complete

App high performance development guide

There is no single way to produce high quality results in RN development, because projects have different component combinations, so it is only possible to optimize applications through efficient development. In general, the “ultimate experience” can be achieved through several versions of optimization. Here’s a rundown of efficient development:

1. Full JS implementation, ensure the development of high efficiency, high yield
2. Problems should be optimized in JS test first, such as Annimated class library and Interaction Manager mentioned above.
3. Real machine test, find the whole problem to deal with, to avoid chain bugs
4. Problems that cannot be solved by JS testing are completed by Native components.

About Hot Updates

The principle of

RN is written in a scripting language so that code can be read and run without prior compilation. RN packages code resources into a bundle JS file when it is published. Other basic plug-ins remain unchanged and hot updates are implemented by replacing only a bundle file

process

Rushy

Rushy is a hot update package management platform independently developed by RN team in China

Characteristics of Pushy:

1. Command line tool and web page management, version release process is simple and convenient, can fully integrate CI.
2. Super small update package created based on bsdiff algorithm, usually between 1 and 10KB after iteration, avoiding hundreds of KB traffic consumption.
3. Support crash rollback, safe and reliable.
4. Meta information and open API to provide higher scalability.
5. When you update across multiple versions, you only need to download one update package instead of updating each version.

community

RN, like ReactJS, has a strong community, as evidenced by the speed of updates to RN versions

Google’s search results also illustrate RN’s influence

The components developers need to use can be found in js. Coach.

Reference & Share

• ReactNative’s website: http://reactnative.com
• ReactNative Chinese official website: http://reactnative.cn
• The React Native performance and efficiency balance mystery: http://zhuanlan.51cto.com/art/201704/537115.htm
• The React Native communication mechanism explanation: http://blog.cnbang.net/tech/2698/
• The React Native from the introduction to the principle: http://www.jianshu.com/p/978c4bd3a759
• The React – Native study guide: http://www.jianshu.com/p/fd4591a978ba
• 【 Jane books feature 】 the React Native development experience set: http://www.jianshu.com/c/45054b9e38c7