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 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: 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: 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: 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: 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: 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
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] -> 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
Native React startup process (iOS).Png
Seven, React Native loading JS source flow (iOS)
- 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
- 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.
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 -> 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 -> 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
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
Native (event handler).Png React