Rendering

The Virtual DOM of React is usually thought of as a performance optimization technique, but it's also much more than that. It's an abstraction layer between the code describing how the application should look, and the actual rendering of those elements. This is called the "bridge", providing an interface from React Native to the host platform's native APIs. React’s rendering to the browser's DOM was explained previously in Figure 1. React Native’s rendering is pictured here in Figure 2: instead of the browser’s DOM, React Native is calling iOS's Objective-C APIs or Android's Java APIs to render native elements via the bridge. (Eiseman 2016.)

 Rendering to different platforms with the Virtual DOM in React Native :








Because React Native is using the native iOS or Android APIs, applications developer with React Native look and feel exactly like real native iOS or Android applications, only developed using JavaScript. React Native also runs in a different process than the one rendering the UI, so applications feel fast and responsive. (Eiseman 2016.)

React Native currently works on iOS and Android, but because of the Virtual DOM and the abstraction layer it provides, it could run on other platforms too, just by writing another "bridge" component for the platform. (Eiseman 2016.) In fact, Facebook and Microsoft announced upcoming support for Windows at the F8 Conference in April 2016. React Native will get Universal Windows Platform support through a new open-source framework, which could even mean Xbox One and and HoloLens support. (Microsoft 2016,)


Comments

Post a Comment

Popular posts from this blog

Size & Dimensions & onLayout

Image
1.window size let winSize = Dimensions.get( 'window' ); console .log(winSize); class Size extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} > some text </ Text > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start' }, block: { height: 100, width: winSize.width, backgroundColor: 'red' }, text: { color: '#ffffff', fontSize: 40/winSize.scale, backgroundColor: 'blue' } }); 2. onLayout class Size extends Component { handleTextLayout(evt){ console .log(evt.nativeEvent.layout); } render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} onLayout = {this.handle
Read more

Data - Networking - Fetch

Image
 Fetch 1.apply  redux-thunk  middleware import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import createLogger from 'redux-logger' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); return store; } 2.start & end action types //todo action types export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS' ; export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS' ; 3.fetch flow import * as types from '../constants/ActionTypes' ; import * as APIs from '../constants/ServerAPIs' ; function shouldFetchAllTodos ( state ) { const data = state.todos; if (data && data.isFetchingAllTodos) { return false } return true ; } export function fetchAllTodos ( ) {
Read more

Absolute & Relative

Image
1.absolute class Position extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.box1} > < Text style = {styles.text} > 1 </ Text > </ View > < View style = {styles.box2} > < Text style = {styles.text} > 2 </ Text > </ View > < View style = {styles.box3} > < Text style = {styles.text} > 3 </ Text > </ View > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { position: 'absolute' , top: 40 , left: 40 , width: 100 , height: 100 , backgroundColor: 'red' }, box2: { position: 'absolute' , top: 80 , left: 80 , width: 100 , height: 100 , backgroundColor: 'blue' }, box3: { position: 'absolute' ,
Read more