[React Native] from the source step by step analysis of the principle of its realization

Preface

Spent more than half a month, read the React Native source code, about the implementation of logic to see to understand, want to think about React Native principle to help students, in fact, as long as the four picture reading is to understand the principle.

If you love my article, I can focus on micro-blog: Yuan Zheng Seemygo, can also be small brother iOS training course, we understand. The follow-up will be more updates, have any questions, welcome Jane Zheng Yuan Book message Seemygo…

A, React Native background

  • Do you have a friend who wants to think about a question, why is it named React Native? React, what is Native?

React

  • React is launched by Facebook a JavaScript framework, mainly for the development of the previous paragraph.
  • React uses component simplified Web development DOM: each HTML interface can be seen as a native DOM web development method, a HTML file, a javaScript file, the file will cause a change to separate, more trouble. A group of related HTML tags and JavaScript can be encapsulated into a single component class, which is easy to reuse and easy to develop.
  • React can efficiently draw the interface of the native Web, refresh the interface (DOM), the need to refresh the entire interface. React will refresh some of the interface, the entire interface will not refresh. Because React created the Virtual DOM mechanism. Virtual DOM is a memory in the JavaScript object, which is a one-to-one correspondence with the DOM, when the interface to send changes, React will use DOM Diff algorithm, the change of DOM refresh
  • React is the use of JSX syntax, a JS syntax sugar, convenient and rapid development. Native
  • Want to know what Native is, you need to understand what the development of App development model, sold a restaurant, please continue to look down.

Two, the common development of the five App model

  • There are 5 common development patterns (Native App, Web App, Hybrid App, Weex, React Native)

Native App

  • Native App: refers to the use of native API development App, such as iOS with OC language development
  • Advantages: high performance
  • Disadvantages: high cost of development and maintenance, raising a native development engineers need a lot of money, the most important iOS version update is also a problem.

Web App

  • Web App: refers to the use of Html development of the mobile web page App, similar to the WeChat applet, the entire App are web pages.
  • Advantages: users do not need to install, does not occupy the phone memory
  • Disadvantages: the user experience is not good, can not be offline, must be networked

Hybrid App

  • Hybrid App: mixed development model, the common development of native Api+Html, such as iOS, using HTML to write the interface, with UIWebView display.
  • Advantages: interface reusability, an interface, iOS and Android can be used
  • Disadvantages: relative to the original, the relative performance of damage

Weex

  • Weex: based on Vue (JS framework) syntax developed by the App, the bottom will automatically JS code into a corresponding platform (iOS, Android) native API, the essence of the native API development, but the surface is developed using Vue.
  • Advantages: you can do a set of code, cross platform implementation, the bottom will automatically determine which platform is currently converted to the corresponding platform native API code.
  • Disadvantages: open source late, the relevant information on the Internet is still relatively small, small community size

React Native

  • React Native: developed based on App React
  • Advantages: skip App Store audit, remote update code, improve the iterative frequency and efficiency, both the Native experience, but also to retain the development efficiency of React.
  • Disadvantages: for those who are not familiar with the development of the front-end staff is relatively slow, can not truly cross platform, the use of the app volume increases.
  • I believe most people understand the end of React Native, more and more confused, it is not a conflict with the Native, Native is a native Api development, but React Native is developed with React.
  • To thoroughly understand, you need to understand the underlying principles of React Native, and again, and want to know the principle, continue to look down

Three, React Native principle

  • React Native principle in fact, almost the same as the Weex, the bottom layer will be converted to the native React API
  • React Native and the Weex difference is that the cross platform above, Weex just write a set of code, React Native iOS, Android React Native wrote, the underlying native API is separated from the implementation of the resolution, a iOS, a Android.

Four, React Native how to convert React to native API

  • React Native will start at the beginning of the OC module table, and then the module table into the JS, JS refer to the module table, you can directly call the OC code. Equivalent to the purchase of a robot (OC), corresponding to a manual (module table), the user (JS) to implement the instructions of the robot instructions.

Five, React Native is how to do JS and OC interaction

  • IOS is a native API JavaScriptCore framework, JS and OC interact through it, to understand the JavaScriptCore, please click JavaScriptCore 1 first written JSX code (React framework that uses JSX syntax) 2 JSX code is parsed into javaScript code 3.OC 4 javaScript code to read JS file read, execute 5.javaScript code returns an array with JavaScriptCore, the array will describe the OC object, the properties of the OC object, the implementation method of the OC object to make the object, so you can set properties, and calling method.
[React Native] from the source step by step analysis of the principle of its realization
JS and OC interaction.Png

Six, React Native startup process (iOS)

  • 1 create RCTRootView -> set the window root controller View, the RN View to add to the window display.
  • 2 create RCTBridge -> bridge object, manage JS and OC interaction, make the transfer around.
  • 3 create RCTBatchedBridge -> batch bridge object, JS and OC interaction are implemented in this class.
  • 4 implementation of [RCTBatchedBridge loadSource] -&gt loading JS source
  • 5 execute [RCTBatchedBridge initModulesWithDispatchGroup] -> create OC module table
  • 6 execute [RCTJSCExecutor injectJSONText] -> insert OC module table into JS
  • 7 execute the JS code, callback OC, call OC components
  • 8 complete UI rendering
[React Native] from the source step by step analysis of the principle of its realization
Native React startup process (iOS).Png

Seven, React Native loading JS source flow (iOS)

  • 1.[RCTJavaScriptLoader loadBundleAtURL] -> load remote server JS code
  • 2.attemptAsynchronousLoadOfBundleAtURL (C function) -> open asynchronous loading JS code
  • 3.[RCTBatchedBridge executeSourceCode:sourceCode] -> let the bulk of the implementation of the source code
  • [RCTJSCExecutor executeApplicationScript] -> JS executor (RCTJSCExecutor) to perform the source code (JS) is the real implementation of the RCTJSCExecutor object
  • 5.[postNotificationName:RCTJavaScriptDidLoadNotification] -> send JS code execution completion notice
  • 6.RCTRootView monitor to RCTJavaScriptDidLoadNotification notification
  • 7 create RCTRootContentView
  • 8 access to RCTBridge in the RCTUIManager registration RCTRootView, and record RCTRootView, _viewRegistry RCTUIManager: management UI component _viewRegistry: save all registered
  • 9.[RCTRootView runApplication:bridge] -> notify JS to run App
  • 10.[RCTBridge enqueueJSCall:@ “AppRegistry” method:@ “runApplication” args:@[moduleName, appParameters] completion:NULL] -> by bridging the object to allow JS to call AppRegistry
  • 11.[RCTBatchedBridge _actuallyInvokeAndProcessModule:module arguments:args queue:RCTJSThread] -> through the batch bridge to allow JS to perform AppRegistry method in method:method
  • 12.[RCTJSCExecutor _executeJSCall:bridgeMethod arguments:@[module, method, args] callback:onComplete] -> let JS executor call JS code in unwrapResult:unwrapResult
  • 13 after the completion of the JS code, you can get the results of the implementation of JS, is an array, OC need to do things will be saved to this array
  • 14.[RCTBatchedBridge _processResponse:json error:error] -> handle the implementation of the JS code returns the result object
  • 15.[RCTBatchedBridge handleBuffer] -> JS returns data, the method call will return an array of JS: description method which need object call according to the order, a group called (module, method, arguments included)
  • 16.[self callNativeModule:[moduleIDs[index] integerValue] method:[methodIDs[index] integerValue] params:paramsArrays[index]] -> traverse array, followed by the implementation of the native method note: the current method of execution of a code block in the traversal in the array, not only executed once.
[React Native] from the source step by step analysis of the principle of its realization
Native JS source code React flow.Png

Eight, React NativeUI control rendering process (iOS)

  • 1.[RCTRootView runApplication:bridge] -> notify JS to run App
  • 2.[RCTBatchedBridge _processResponse:json -&gt error:error]; deal with the completion of the JS code (runApplication) to return the corresponding, including the number of child controls need to add information.
  • 3.[RCTBatchedBridge batchDidComplete] -> batch bridge object calling batch processing method
  • 4.[RCTUIManager batchDidComplete] -> RCTUIManager call batch processing to complete the method, it will begin to load the child control rootView.
  • 5.[RCTUIManager createView:viewName:rootTag:props] -> through JS OC code, let UI managers create sub control View through the RCT_EXPORT_METHOD RCT_EXPORT_METHOD macro definition createView this method (createView: (nonnull NSNumber * reactTag) viewName: (NSString *) viewName rootTag: (__unused NSNumber * rootTag) props: (NSDictionary *) props) RCT_EXPORT_METHOD macro: corresponding OC method in production JS, so that JS can directly call attention to each to create a UIView, it will create a RCTShadowView and UIView corresponding to RCTShadowView: to save the corresponding UIView layout and management of child controls, UIView loading
  • 6.[RCTUIManager _layoutAndMount] -> layout RCTRootView and add child controls
  • 7.[RCTUIManager setChildren:reactTags:] -> RCTRootView corresponding to the set of sub control RCTRootShadowView note: this method is also called OC method JS
  • 8.[RCTRootShadowView insertReactSubview:view -&gt atIndex:index++]; traverse child control array, to insert all the sub RCTRootShadowView control
  • 9.[RCTShadowView processUpdatedProperties:parentProperties:] -> processing to preserve the properties in the RCTShadowView, it will go to the layout of the corresponding UIView RCTShadowView all child controls
  • 10.[RCTView didUpdateReactSubviews] -> add native controls to native View
  • 11 complete UI rendering
[React Native] from the source step by step analysis of the principle of its realization
Native (UI control rendering process).Png React

Nine, React Native event processing process (iOS)

  • 1 when creating RCTRootContentView, creates the RCTTouchHandler RCTTouchHandler: internal successor to the UIGestureRecognizer, it is a gesture and it will act as a RCTRootContentView gesture, so click on RCTRootContentView, RCTTouchHandler RCTTouchHandler:, the internal implementation of touchBegin touch trigger method will be used to handle touch events
  • 2 when creating RCTTouchHandler, internal RCTEventDispatcher: used to create RCTEventDispatcher event processing methods passed to JS, which is when the UI interface event, will be the implementation of JS code.
  • 3 intercepted by RCTRootContentView click event will produce an event to break the RCTTouchHandler object in RCTRootContentView.
  • 4 when an event occurs, the [RCTTouchHandler touchBegin] is executed
  • The 5.RCTTouchHandler touch method will execute [RCTTouchHandler _updateAndDispatchTouches:eventName:] internally to create RCTTouchEvent event objects
  • 6.[RCTEventDispatcher sendEvent:event] -> let the event distribution object call send event object inside the event will be saved to the _eventQueue (event queue)
  • 7.[RCTEventDispatcher flushEventsQueue] -> let the event distribution object scouring the event queue, is to get all the events in the event queue execution
  • 8.[RCTEventDispatcher dispatchEvent:event] -> traverse the event queue, one of the essence of the event distribution event distribution: to execute the JS code, the corresponding event.
  • 9.[RCTBatchedBridge enqueueJSCall:[[event moduleDotMethod] args:[event arguments]]; -> let the bridge object called JS processing event essence: is the event to generate JS code call class]
  • 10 this will be able to complete the UI event to the corresponding JS code
[React Native] from the source step by step analysis of the principle of its realization
Native (event handler).Png React