1, let me write it out front

In The past, the development of structure, style, and behavior in Web development was often separated, known as “separation of concerns,” which means that technologies are responsible for their own domain (HTML, CSS, JS) and do not mix and form coupling.

HTML language: Responsible for the structure of the web page, also known as the semantic layer

CSS language: responsible for the style of web pages, also known as the visual layer

JavaScript language: Responsible for the logic and interaction of web pages, also known as the logic layer or interaction layer

This used to be a good practice recommendation. However, in recent years, component-based and modular development thinking has gradually become the way (especially after React came out, this principle was broken. React’s basic organizational unit is component, forcing HTML, CSS, JS to be written together), and feature or function granularity has become a choice in software design and development.

So, in real development, is there a superset that cuts through all three? Yes, JSX and typescript are two different concepts. JSX and typescript are syntax-sugar, JavaScript supersets, and typescript1.6 supports JSX. React uses JSX (Write CSS in JS, write “HTML” in JS) to develop components. React-native is an extension of React, and JSX is also used for component development.

component in react-native

2, style

2.1. Style definition

In RN, you don’t need to learn any special syntax to define styles, you use JavaScript to write styles. Style names (attributes) basically follow the CSS naming rules and rules (such as post-defined override rules, style representation, etc.), but according to the SYNTAX requirements of JS, some style names need to be camel name (such as CSS background-color should be written as “backgroundColor”).

Styles can be defined in two ways:

Style ={{color: red}}

StyleSheet: : styleSheet. Creat ({textColor: {color: red}})

2.2. Style usage

In RN, core components have a property called style, and the use of style in RN is to assign a value to that property. Property can be an object in JavaScript ({color: red}) or an array ([{color: red}, {color: blue}]).

2.3. Category of style application (available styles and identification of components)

There are certain categories of styles that can be applied to components in RN (base components, components provided in RN), such as color styles that cannot be applied to View components. There are two ways to identify which components have which styles available: 1. Check online or on the website. 2. Turn on the WARN alert during debugging to apply a style that will generate an alarm if the component does not have it. The alarm lists the set of styles to which this component can be applied.

3, the layout

React Native uses the Flexbox rule to specify the layout of a component’s child elements. Flexbox provides a consistent layout structure across different screen sizes. The Flexbox rule in RN is basically the same as the Flexbox rule in Css Flexbox on the Web. The main difference is that flex-direction defaults to horizontal in Css and vertical in RN. For more information on flexbox layouts, please refer to my previous article box Models and Layouts.

4, draw

Page drawing in Web is done by the browser UI back end, while in RN it is done by Native drawing (such as UIkits in ios). For specific interaction and communication between RN and Native, please refer to another article I wrote before “React-Native Principle parsing and Communication mechanism” (Eg: Ios)), here just do a simple analysis and comparison.

4.1. Web page rendering

4.1.1, the process of WebKit parsing web pages

4.1.2, Internal processes of the browser

UI Backend is a module that draws page layers.

4.2. RN view drawing

4.2.1, Start Rendering (From component role Anatomy — Android)

To put it simply, it is Native initialization -> load JS, JS side register component -> end call JS side run method, pass in the entry component name -> JS side start rendering process.

4.2.2, Component Rendering –View

Create: ReactNative UI components through requireNativeComponent – > createReactNativeComponentClass – > ReactNativeBaseComponent mountComponent call relationship Call UIManager (Native Module) in mountComponent to create View: UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload); On the Native side, UIManager calls the ViewManager (singleton, management class) of the corresponding component type to create the instance.

Update: Attribute — style synchronization, also known as the re-render process, which is completed by calling the receiveComponent-> uimanager.updateView under ReactNativeBaseComponent.

Reference:

Github.com/facebook/re…

Facebook. Making. IO/react – nativ…

www.jianshu.com/p/17d6f6c57…

This article originally himself in Jane books written: www.jianshu.com/p/ccd263e66… Subsequent articles will be migrated or written directly on nuggets.