Welcome to cloud + community, get more Tencent mass technology practice dry goods oh ~

The author:
MelonTeam

1.What is React Native

As we all know, product requirements always want to iterate quickly. However, due to the review mechanism of the application distribution market (mainly iOS review), some fast iteration requirements can only choose the Web as the application scenario. While Web apps are already a mature business, H5 has helped web apps quickly take over the mobile market. However, Web applications have the bottleneck of Web applications, and are not as good as native applications in some aspects of interaction and performance. At this time, the emergence of React Native may bring us a little new idea. React Native was born with a label of cross-platform, fast iteration, and easy installation packages. Before React Native, there were a lot of technologies that were intended to be cross-platform, but none that were truly cross-platform. Perhaps React Native’s ‘Learn once, Write Anywhere’ will work. Here’s a look at React Native from a white perspective.

2. To do a good job, he must use his tools

It has been an invariable truth since ancient times that to do a good job, we must sharpen our tools. In our normal development, a good IDE can multiply our development efficiency. A good IDE will also help the future development of a good language. Like OC or SWIFT, with xcode; C++ or c#, you definitely think of visual stutio.

There are plenty of React Native ides, though. Famous ones are Nuclide, Sublime, WebStrom. However, I personally prefer WebStrom, which claims to be the smartest javascript IDE.

3.JSX

// use JSX react. render(<div> <div> <div>demodiv> div> div> div> div> document.getelementById ('demo')); // do not use JSX react. render(react. createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'demo')
        )
    ),
    document.getElementById('demo'));Copy the code

JSX syntax, like writing XML directly in Javascript code, is essentially a syntax candy. Every XML tag is converted to pure Javascript code by the JSX conversion tool. React officially recommends using JSX. Of course, you can write directly in pure Javascript code, but with JSX, the structure of components and the relationships between components are much clearer.

4.ES6

While watching React Native, we first need to understand the language used by React Native. As ES6 is the next generation standard for javascript, let’s take a look at some key ES6 syntax to better understand React Native.

Let, const

Let, like var, can declare variables. The only difference is that let adds the concept of scope to javascript, declaring variables that are valid only within the code block in which the command resides. Const can also be declared as a variable, but as a constant. Once declared, the value cannot be changed.

Class extends super

class Dog{

  constructor(){
      this.type = 'Dog';
  }

  eat(){
      console.log(this.type + " eat"); }}letDog = new Dog(); Dog.eat(); //Dog eat class BigDog extends Dog{constructor(){
        super();
        this.type = 'BigDog'; }}letBigDog = new BigDog(); BigDog.eat(); //BigDog eatCopy the code

arrow function

More concise function writing

function(x, y) { x++; Y ‐ ‐;returnx + y; } // old (x, y) => {x++; Y ‐ ‐;returnX +y} //Copy the code

The default, rest

Default is simply the default value. You can see the examples below, call say () method is forget the number, the traditional approach is combined with the sentence type = type | | ‘1’ to specify a default value. If we use ES6 we just write it like this:

function say(type = '1'){
      console.log(type)
}
say()//' '1' 'Copy the code

The last rest syntax is simple enough to look at directly:

functionsay(... types){ console.log(types) } say('1'.'2'3') / / / "1", "2", "3"]Copy the code

import export

With these two keywords. Just like iOS, we can treat different JS as different modules and export the leaked ones. Import the import that needs to be referenced.

Layout of 5.

Pixel density

React Native provides pixel-independent units of length

Flex in React Native

The Flex layout is similar to the Flex layout in the Web, except that the Flex layout in React Native takes a subset of the Flex layout in the Web.

Absolute and relative layouts

Absolute layout and relative layout in React Native are similar to traditional layout in terminal development. The difference is that one is relative path and the other is absolute path.

6.pros&state

State State is an object of the React component. React treats the user interface like a state machine. It’s easy to keep the user interface consistent with the data by imagining it has different states and then rendering them. In React, updating the component’s state will cause the user interface to be rerendered (don’t manipulate the DOM). Simply put, the user interface changes as state changes.

The props component is a way for a parent to pass data to its children.

7.Virtual Dom

There are two reasons why DOM operation is slow. One is that we need to operate specific native controls, which itself is not fast to operate. The other is that we have a very slow way of processing DOM. React uses JS to construct a new data structure called the Virtual DOM to render. The Virtual DOM only exists in the data structure without actually rendering the DOM. When you try to change the display content, the newly generated Virtual Dom will be compared with the existing Virtual Dom, and the difference will be found through the diff algorithm. These operations are all done in fast JS, and finally the actual Dom will perform minimal Dom operations to complete the effect. This is the concept of the Virtual Dom. To sum up, the cost of actually manipulating the Dom is the lowest by introducing new data structures, figuring out the smallest way to move the Dom.

8. The DIFF algorithm

Traditional DIff algorithm

It is a complex and worthy problem to calculate the minimum operation of converting one tree structure into another tree structure. The traditional DIFF algorithm compares nodes in turn through cyclic recursion, which is inefficient and the algorithm complexity reaches O(N3), where N is the total number of nodes in the tree.

React diff

The complexity of the traditional DIff algorithm is O(N3), which obviously cannot meet the performance requirements. React converts O(N3) complexity problems into O(n) complexity problems by making bold strategies. 1. There are very few DOM node movement operations across hierarchies in UI, which can be ignored. 2 Two components with the same class will generate similar tree structures, and two components with different classes will generate different tree structures. 3. A group of child nodes at the same level can be distinguished by their unique ids. React optimizes the tree Diff, Component Diff, and Element Diff algorithms based on the above three premise strategies. These three premise strategies are proved to be reasonable and accurate, ensuring the performance of the overall interface construction. And the optimization of this algorithm also makes the algorithm complexity close to O(n). Greatly improved performance.

React Native Life cycle

React Native’s lifecycle is different from what we’re used to in terminal development. React Native is componentized, so its life cycle revolves around the creation, update, and extinction of components. The component life cycle is roughly divided into three phases: Phase 1: The creation of the component, which is the first time the component is drawn, where the initialization function of the component is entered. Phase 2: in the component running and interaction phase, the component can handle user interaction or receive events to update the interface. The third stage: is the component uninstall death stage, the component will do some destruction functions. (The picture of this module is from the Internet)

10.React Native Custom control

React Native’s support for plug-ins is very decoupled. For example, if we want to add a Video plug-in, we can directly type NPM install react-native – video-save, and then type react-native link. This automatically adds various dependencies and package guide operations to the native module.

As can be seen from the above project directory, the video plug-in has been linked to the project directory.

11.React Native Debug

The red screen

Red screen errors occur only in Debug mode. When a red screen occurs in React Native, it indicates that your JS code is running incorrectly. The red screen will indicate the number of lines or type of error and the stack information. If not, you can rely on debugging tools or log information.

Chrome Debug

React Native debuggers are available in Chrome. The simulator selects Command + R and the real machine selects shake to call Debug Menu. Select Debug in Chrome to invoke the Chrome debugger. Chrome debugger is very powerful, like normal single step breakpoint debugging, conditional debugging, stack information, etc.

Log

Log information is important in both development and production environments. Chrome Debug can print log information directly from the command line. In the production environment, you can print logs to a file for analysis.

12.Hot Reload

What you see is what you get is one of the highlights of React Native. Whether it’s a real machine or an emulator, just fill in the corresponding IP address. You can display your code in real time. The simulator selects Command + R and the real machine selects shake to call Debug Menu. You can select Hot Reload from the Debug Menu.

Nodule 13.

React Native provides an introduction to React Native language, important syntax, styles, performance analysis, important state&props, lifecycle, etc. These introductions, though shallow, are not delved into. However, I hope this gives you a general impression of React Native and serves as a primer for the little white people.

reading

React Native Learning Notes React-Native Introduction to react-native practice

This article has been published by the author authorized cloud + community, please indicate the source of the original

React Native