What is the difference between react and react native

The difference between react and react native is: 1. The platform on which the framework works is different; 2. The working principle is different; 3. The rendering cycle is different; 4. All elements in react native will be replaced by the react components specified by the platform ;5. The APIs of the host platforms are different.

The environment of this article: windows10, react16 version, Dell G3 computer.

(Learning video sharing: react video tutorial)

The differences are as follows:

1. The platforms used by the framework are different

RN It is derived from React. Both frameworks use JSX development syntax, but RN is a JS framework used to develop truly natively rendered iOS and Andriod mobile applications, while React uses the browser as a rendering platform.

2. The difference in working principle

Virtual DOM is between the view described by the developer and the view actually rendered on the page. If you want to render an interactive user interface on a browser, developers must operate the browser's document object model. The emergence of Virtual DOM is to save the performance consumed by this part of the operation.

But the huge potential of Virtual DOM lies in this abstraction layer, which can bring many possibilities.

The working principle of React Native is to call the Objective-C API to render iOS components and the Java API to render Android components instead of rendering to the DOM. Bridging allows React to call UI components opened by the host platform, and the React component returns the markup code describing the interface through the render method. If it is a web platform, React will eventually parse the markup code into the browser's DOM; in React Native, the markup code will be parsed into platform-specific components, for example, 548e7793df275d156d270cdda504ba19 will appear as a UIView on the iOS platform.

3. Rendering cycle

The rendering cycle of React starts after the react component is mounted to the DOM, and then React enters the rendering cycle and renders the component as needed. In the rendering phase, React renders the HTML tags returned by the developer in return directly to the page on demand.

The React Native life cycle is basically the same as React. In terms of rendering, because React Native relies on bridging and does not run on the UI main thread, it can execute these asynchronous calls without affecting the user experience.

4. Create components

When writing React for the web environment, the view ultimately needs to be rendered into an ordinary HTML element; in React Native, all elements will be specified by the platform React components Replacement, for example, in iOS, the 548e7793df275d156d270cdda504ba19 component is rendered as UIView, but on the Android platform, it is rendered as View.

UI elements are all React components, not basic html elements like dc6dce4a544fdca2df29d5ac0ea9906b, so when using each component, you need to import it explicitly, for example:

import { DatePickerIOS } from 'react-native';

5. Native styles

In the Web, using CSS styles to add styles to React components is already an inaccessible part of the development process. React generally doesn't affect the way we write CSS, and it does make dynamic creation of styles easier (via state and props), but other than that, React basically doesn't care how we handle styles.

There are a large number of ways to handle layout and styles on non-Web platforms. When we use React Native, we only need to use a standard method to handle styles. The bridge between React and the host platform includes a reduction The implementation of CSS subset, which is mainly laid out through flexbox, is as simple as possible instead of implementing all CSS rules. Unlike the Web platform, where the level of CSS support varies from browser to browser, React Native achieves consistent style rules.

6. Host platform API

The biggest difference between React using the Web environment and React Native lies in the API of the host platform.

In the Web, we often have to deal with problems caused by inconsistent and fragmented adoption of standards, and most browsers only support some core features. However, in React Native, platform-specific APIs play a huge role in providing a great native user experience. Of course, there are many more aspects to consider. The API covers many functions, from data storage to geo-services to controlling hardware devices such as cameras. APIs on unconventional platforms will be more interesting. For example, what will the API between React Native and virtual reality headsets look like?

By default, the iOS and Android versions of React Native support many commonly used features and can even support any asynchronous native API. React Native makes using the host platform API easier and more intuitive, where you can experiment freely. At the same time, be sure to think about how to match the experience of the target platform and design the interaction process in your mind. Needless to say, React Native's bridge cannot expose all APIs of the host platform.

If you need to use an unsupported feature, you can add it to React Native yourself. Also, it would be better if someone else has already integrated it, so you should check out the implementation in the community in a timely manner. It is worth noting that using platform APIs will also help with code reuse. At the same time, React components that implement platform-specific functionality are also platform-specific.

Isolating and encapsulating these components will bring greater flexibility to your application. Of course, this also works for you developing web applications. If you want to share code between React and React Native, please remember that APIs like DOM do not exist in React Native.

Related recommendations: js tutorial

The above is the detailed content of What is the difference between react and react native. For more information, please follow other related articles on the PHP Chinese website!