React Native is a set of programming frameworks that use React to build Native apps

React Native is a set of programming frameworks that use React to build Native apps

React Native at first sightwhat is React Native?

According to the official description, React Native is a set of programming frameworks that use React to build Native apps. The launch soon sparked widespread concern, thanks to JavaScript's open and active technology community and React Native's complete technical system support. This article attempts to summarize the introduction of React Native.

React Native is primarily a set of runtime, including a set of react.js libraries that enable development to be developed in a React way, as well as a Native ployfill to compensate for the lack of WebKit rendering && interactivity capabilities.

JavaScript runtime runs on JavaScriptCore, JavaScriptCore is WebKit's JavaScript engine, the JavaScript engine in Safari, which Apple calls Nit Ro. JSC since its inception in 2008, so far has done a lot of optimization, mature execution engine to ensure the operational efficiency. The RN itself is not tied to the JS engine, and the reason for choosing JavaScriptCore is IOS's natural support for JSC.

How React Native works?

React Native, by executing JavaScript, calculates the information about layout-style event handling and saves it in a DOM-like data structure (reactelement tree). Renders the UI through the pure Native component. Event handling is also the callback that first native processing, and then listens to the response of JavaScript events. is to integrate JavaScript's logical capabilities with the native performance tradeoff.

In terms of component development and reuse, Reactnative uses REQUIREJS to organize the components. Requirejs is widely used in node, and combining with NPM makes it easy to reuse components. A file is a component that can be published to the NPM repository, configured to describe the component name and version, and other development can directly reference an existing component. Similar to Cocoapods and Maven, it solves the problem that JS code relies on management and collaboration.

On the development of components, the UI development approach is based on React's excellent design, react.js a craze in the JavaScript world, turning the DOM-oriented development approach into component-oriented development. This is similar to the native development model, first design the static component style, and then process the interaction flow, pumping away from the mutable state. But React plus JavaScript programming ability is not comparable to Java and OC ... React uses Babel to support the syntax of ES6 and to design JSX for simplifying DOM writing, which greatly simplifies development and makes development interesting. React also employs a reverse-dependent design, DOM redraw, and component lifecycles, all controlled by react.js, and development requires only UI and interaction design, and can refer to the delegate understanding of various life cycles in IOS.

Native and JavaScript communication is implemented through native call JavaScript, which can only be one-way, always from native to JS. This mechanism is now quite mature, but RN solves the problem of two-way communication and performance by implementing the object passing and batch processing JS callback, as the developer can do two-way invocation. In the Native section, the RN provides a scheme for JAVASCIRPT and Native communication object passing, and returns the method of registering callback through a one-way call, allowing Native to callback the JS method at the right time, and by letting the Native component run in a separate thread and Batch calls callback to optimize overall performance.

RN officially provides a lot of Native components, and because of its openness, there are many react-parts these open source component libraries, developers can use them to make fine interaction design.

Disadvantage

Loadtime problem, because Rn is a JavaScript-based design, page rendering requires a JavaScript render call to be performed first. At present after some optimization (framework extraction reuse, JS resource cache) on the IPhone5 test simple page rendering, JS execution time of about 200ms, this time is mainly in the first JS execution overhead. This time is perceptible to the user, and will grow with the complexity of JS.

Memory overhead. Relying on the JS engine, the memory footprint is significantly higher than the pure native, which is particularly problematic for Android's low-end machines.

Power consumption, due to the additional JS of the execution of frequent communication needs of the serialization operation will cause a rise in power consumption, although there is no close to the specific gap, but the power consumption is also one of the issues worth attention.

Although these problems exist, dynamic capabilities are too tempting for native development, and native development needs to choose the right technology based on the problem to be solved. For JS Development, using your own familiar environment can greatly enhance the client experience, is a great technology.

Reference

https://facebook.github.io/react-native/
Http://trac.webkit.org/wiki/JavaScriptCore
Http://ariya.ofilabs.com/2012/06/nitro-javascriptcore-and-jit.html
Http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
https://news.ycombinator.com/item?id=8964935
http://tadeuzagallo.com/blog/react-native-bridge/

Original article, reprint please indicate source http://www.cnblogs.com/hucn/p/5077713.html http://nickolashu.github.io/2015/10/12/ react-native-at-first-sight/

More articles about my personal blog

http://nickolashu.github.io/

Category: Mobile Tags: reactnative

React Native is a set of programming frameworks that use React to build Native apps