基于React Native来实现App的热更新

热更新: 类似Hot-Patching,在程序不发布版本的前提下,对部分功能或者全部功能进行修改或者升级。


JSX

1. JSX简介

1.1 https://jsx.github.io/

1.2 Tutorial: JSX

"JSX is a preprocessor step that adds XML syntax to JavaScript. "

"Just like XML, JSX tags have a tag name, attributes, and children. "

"JSX lets you create JavaScript objects using HTML syntax. " Ref [5]

"JSX is not required to use React." Ref[5]

JSX 官方文档: https://facebook.github.io/react/docs/jsx-in-depth.html

live Babel REPL: 将JSX转换为JavaScript代码的REPL。https://babeljs.io/repl/

JSX gotchas for some key differences. https://facebook.github.io/react/docs/jsx-gotchas.html

http://buildwithreact.com/tutorial/jsx

http://jsbin.com/qucecahako/1/edit?html,css,js,output

1.3 JSX in Depth

JSX is a JavaScript syntax extension that looks similar to XML.

https://facebook.github.io/react/docs/jsx-in-depth.html

可以用Babel将JSX转换为JavaScript。

1.4 JSX 规范

https://facebook.github.io/jsx/


React Native

1. React Getting Started

https://facebook.github.io/react/docs/getting-started.html

CommonJS module system like browserify or webpack

2. 在已存在的App中集成React Native

2.1 So You Want To Dynamically Update Your React Native App

https://medium.com/ios-os-x-development/so-you-want-to-dynamically-update-your-react-native-app-d1d88bf11ede#.84rxp1l62  (Read Again)

DiffMatchPatch

2.2 Integrating with Existing Apps

https://facebook.github.io/react-native/docs/embedded-app-ios.html#content

https://discuss.reactjs.org/t/a-collection-of-examples-for-using-react-native-in-an-existing-ios-app/1954

https://github.com/dsibiski/react-native-embedded-app-example

https://github.com/tjwudi/EmbededReactNativeExample

A): 准备先决条件

1. Install your copy of React Native under your node_modules directory where your JS resides.

FQA

Q: 如何获取React Native?

A: 参考 iOS.ReactNative-1-introduction 中的 "2.2 创建、运行React Native工程"

react-native init HelloWorld

 zhangchongdeMacBook-Pro:react-native XiaoKL$ react-native init HelloWorld
This will walk you through creating a new React Native project in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
npm WARN engine react-native@0.17.: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"}) > bufferutil@1.2. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/bufferutil
> node-gyp rebuild CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node > utf--validate@1.2. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf--validate
> node-gyp rebuild CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node > spawn-sync@1.0. postinstall /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall > fsevents@1.0. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build [fsevents] Success: "/Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v44-darwin-x64/fse.node" is installed via remote
react-native@0.17. node_modules/react-native
├── absolute-path@0.0.
├── graceful-fs@4.1.
├── progress@1.1.
├── stacktrace-parser@0.1.
├── wordwrap@1.0.
├── react-timer-mixin@0.13.
├── event-target-shim@1.1.
├── image-size@0.3.
├── underscore@1.8.
├── semver@5.1.
├── bser@1.0. (node-int64@0.4.)
├── opn@3.0. (object-assign@4.0.)
├── debug@2.2. (ms@0.7.)
├── optimist@0.6. (wordwrap@0.0., minimist@0.0.)
├── source-map@0.4. (amdefine@1.0.)
├── mkdirp@0.5. (minimist@0.0.)
├── promise@7.0. (asap@2.0.)
├── chalk@1.1. (supports-color@2.0., ansi-styles@2.1., escape-string-regexp@1.0., has-ansi@2.0., strip-ansi@3.0.)
├── immutable@3.7.
├── worker-farm@1.3. (xtend@4.0., errno@0.1.)
├── fbjs-haste@0.3.
├── sane@1.3. (fb-watchman@1.6., watch@0.10., minimist@1.2., exec-sh@0.2., walker@1.0., minimatch@0.2.)
├── yargs@3.31. (decamelize@1.1., camelcase@2.0., window-size@0.1., y18n@3.2., string-width@1.0., os-locale@1.4., cliui@3.1.)
├── json5@0.4.
├── art@0.10.
├── node-fetch@1.3. (encoding@0.1.)
├── rebound@0.0.
├── connect@2.30. (cookie@0.1., bytes@2.1., utils-merge@1.0., cookie-signature@1.0., pause@0.1., fresh@0.3., on-headers@1.0., response-time@2.3., content-type@1.0., vhost@3.0., basic-auth-connect@1.0., parseurl@1.3., cookie-parser@1.3., depd@1.0., qs@4.0., connect-timeout@1.6., http-errors@1.3., method-override@2.3., serve-favicon@2.3., finalhandler@0.4., morgan@1.6., express-session@1.11., csurf@1.8., serve-static@1.10., multiparty@3.3., type-is@1.6., errorhandler@1.4., compression@1.5., body-parser@1.13., serve-index@1.7.)
├── regenerator@0.8. (private@0.1., through@2.3., esprima-fb@15001.1001.-dev-harmony-fb, commoner@0.10., recast@0.10., defs@1.1.)
├── uglify-js@2.6. (uglify-to-browserify@1.0., async@0.2., yargs@3.10., source-map@0.5.)
├── ws@0.8. (options@0.0., ultron@1.0., bufferutil@1.2., utf--validate@1.2.)
├── module-deps@3.9. (inherits@2.0., browser-resolve@1.11., through2@1.1., xtend@4.0., defined@1.0., duplexer2@0.0., concat-stream@1.4., parents@1.0., subarg@1.0., readable-stream@1.1., stream-combiner2@1.0., resolve@1.1., JSONStream@1.0., detective@4.3.)
├── jstransform@11.0. (object-assign@2.1., base62@1.1., esprima-fb@15001.1.-dev-harmony-fb, commoner@0.10.)
├── react-haste@0.14.
├── yeoman-environment@1.3. (escape-string-regexp@1.0., log-symbols@1.0., grouped-queue@0.3., text-table@0.2., untildify@2.1., diff@2.2., globby@3.0., mem-fs@1.1., inquirer@0.11., lodash@3.10.)
├── joi@6.10. (topo@1.1., isemail@1.2., hoek@2.16., moment@2.10.)
├── babel-polyfill@6.3. (babel-regenerator-runtime@6.3., babel-runtime@5.8., core-js@1.2.)
├── babel-plugin-syntax-trailing-function-commas@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-destructuring@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-constants@6.1. (babel-runtime@5.8.)
├── babel-plugin-syntax-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-react-jsx@6.3. (babel-helper-builder-react-jsx@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-for-of@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-async-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-flow@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-arrow-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-spread@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-flow-strip-types@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-shorthand-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-rest-spread@6.3. (babel-plugin-syntax-object-rest-spread@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-parameters@6.3. (babel-helper-get-function-arity@6.3., babel-helper-call-delegate@6.3., babel-template@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-template-literals@6.3. (babel-runtime@5.8.)
├── babel-plugin-external-helpers-@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-modules-commonjs@6.3. (babel-plugin-transform-strict-mode@6.3., babel-template@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-react-display-name@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-assign@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-block-scoping@6.3. (babel-template@6.3., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-syntax-jsx@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-computed-properties@6.3. (babel-template@6.3., babel-helper-define-map@6.3., babel-runtime@5.8.)
├── babel-types@6.3. (to-fast-properties@1.0., esutils@2.0., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-classes@6.3. (babel-helper-optimise-call-expression@6.3., babel-messages@6.3., babel-helper-replace-supers@6.3., babel-helper-function-name@6.3., babel-template@6.3., babel-helper-define-map@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-regenerator@6.3. (private@0.1., babel-traverse@6.3., babel-runtime@5.8.)
├── babylon@6.3. (babel-runtime@5.8.)
├── babel-core@6.3. (slash@1.0., shebang-regex@1.0., path-is-absolute@1.0., path-exists@1.0., babel-template@6.3., babel-messages@6.3., private@0.1., babel-helpers@6.3., convert-source-map@1.1., babel-code-frame@6.3., minimatch@2.0., babel-generator@6.3., babel-traverse@6.3., source-map@0.5., lodash@3.10., babel-register@6.3., babel-runtime@5.8.)
├── yeoman-generator@0.20. (path-is-absolute@1.0., path-exists@1.0., read-chunk@1.0., detect-conflict@1.0., yeoman-welcome@1.0., yeoman-assert@2.1., rimraf@2.4., text-table@0.2., xdg-basedir@2.0., user-home@2.0., mime@1.3., class-extend@0.1., dargs@4.0., istextorbinary@1.0., async@1.5., nopt@3.0., run-async@0.1., shelljs@0.5., glob@5.0., cli-table@0.3., diff@2.2., through2@2.0., underscore.string@3.2., findup-sync@0.2., mem-fs-editor@2.1., dateformat@1.0., github-username@2.1., pretty-bytes@2.0., download@4.4., cross-spawn@2.1., html-wiring@1.2., gruntfile-editor@1.1., sinon@1.17., lodash@3.10., inquirer@0.8.)
└── fbjs-scripts@0.4. (object-assign@4.0., through2@2.0., gulp-util@3.0., core-js@1.2., babel@5.8.)
Setting up new React Native app in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
To run your app on iOS:
Open /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
react-native run-android
zhangchongdeMacBook-Pro:react-native XiaoKL$

react-native init 命令的输出

Q: 如何获得某个版本的React-Native的代码?

A:

B): 创建Podfile

$ pod init

C): 安装React-Native Library

1. 在Podfile中添加以下内容:

 # Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => '../node_modules/react-native', :subspecs => [ // A
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]

A: :path 用来将本地的代码通过Pod方式进行安装. :path 的值指定了本地代码相对Podfile的相对路径。例如在Demo中 :path 取值为:

:path => '../HelloWorld/node_modules/react-native'

2. 运行命令 $ pod install

D): 打包js代码

react-native bundle

 react-native bundle --entry-file index.ios.js --platform ios --bundle-output EmbededReactNative.jsbundle

react-native bundle 命令说明 [TODO]


Flexbox

Flexbox: React Native’s way of doing UI layout.

1. How To Get Started With CSS Flexbox (AAAA+)

http://www.paulund.co.uk/css-flexbox

2. A Complete Guide to Flexbox (AAAA)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Node

1. node 简介和发展历程

ls -lt `which node`

lrwxr-xr-x  1 XiaoKL  staff  4  7 28 23:49 /Users/XiaoKL/.nvm/versions/io.js/v2.5.0/bin/node -> iojs

2. 安装和升级Node

Installing node.js on OSX 10.11 El Capitan

http://coolestguidesontheplanet.com/installing-node-js-on-osx-10-10-yosemite/

How to Install Node.js and NPM on a Mac (Brew版本)

http://blog.teamtreehouse.com/install-node-js-npm-mac

brew安装Node.js存在的问题

https://www.reddit.com/r/node/comments/3kkcpu/is_anyone_able_to_brew_upgrade_node_to_400/

Switch Node.js versions with the Node Version Manager (nvm)

http://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

2.1 nvm

nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

关于nvm参考 Nodejs.nvm


NPM

1. NPM简介

javascript package manager

NPM: Node Package Manager

"npm is the  package manager for the Node JavaScript platform.  It puts modules in

place so that node can find them, and manages dependency conflicts intelligently."

man npm


RCTRootView & RCTView

1. RCTRootView

Native Code(Objective-C Code)和React Native间的接口由RCTRootView暴露出来。

RCTRootView中只包含RCTRootContentView对象,该对象是实际的React Native组件的容器。

 @interface RCTRootContentView : RCTView <RCTInvalidating>

 @property (nonatomic, readonly) BOOL contentHasAppeared;

 - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge;

 @end

2. RCTView

RCTView是ReactNative中UI容器组件(可以包含其它UI对象的组件)的父类,其直接子类包含:

RCTTextView RCTScrollView RCTRootContentView RCTWebView

TODO: UML图

3. RCTViewNodeProtocol

RCTViewNodeProtocol: Logical node in a tree of application components.

4. RCTBridge


Reference

1. A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript

https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987#.5853ux96p

2. AppHub – Update React Native Apps Without Re-Submitting to Apple

https://news.ycombinator.com/item?id=10048072

3. An iOS Developer on React Native

https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0#.uz3t35nfi

从iOS开发者的角度过度到React Native

4. 阿里的weex

4.1 如何看待阿里无线前端发布的Weex?

http://www.zhihu.com/question/37636296

4.2 对无线电商动态化方案的思考(二)

https://github.com/amfe/article/issues/14

5. Displaying Data

https://facebook.github.io/react/docs/displaying-data.html

6. react-native (AAAA)

https://github.com/facebook/react-native

7. awesome-react-native (AAAA)

https://github.com/jondot/awesome-react-native

iOS.ReactNative-5-make-react-native-to-support-dynamically-update的更多相关文章

  1. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  2. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  3. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  4. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  5. [React Native] Writing Platform-Specific Components for iOS and Android in React Native

    Learn to write components that render differently on iOS and Android, but present the same API. Firs ...

  6. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

  7. React Native iOS 离线包

    平时使用React Native 时候, js代码和图片资源运行在一个Debug Server上(需要cd 到RN目录,然后终端执行 npm start 命令开启本地服务 ).每次更新代码之后只需要使 ...

  8. React Native 手工搭建环境 之iOS篇

    常识 React native 开发服务器 在开发时,我们的框架是这样的:  当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内.这时,已经不再需要开发服 ...

  9. React Native创建一个APP

    React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...

  10. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

随机推荐

  1. canvas内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. rsync 通过 ssh 上传文件

    rsync -avzP /www/ -e ssh root@192.168.1.200:/www/ 批处理上传: #!/bin/bash for (( ; ; )) do rsync -avzP /w ...

  3. 简单三个表之间关联 与 case when语句的应用

    select p.conttract_id,l.order_code,jz.cur_branch from wy_auto_workflow_log l,wg_pjhsb p,wg_jzmb jz w ...

  4. 你是否经常忘记网站上的各种密码?分享个密码管理软件LastPass

      现在网络那么发达,我们上网的每个人势必会在各个网站上登陆,那势必会有一堆密码需要管理,那怎么能记住那么多网站的密码呢?我之前的做法是设置几个常用的密码,好多不重要的网站用一个,重要的网站用一个,然 ...

  5. 关于数组Arry的一些基本认识

    认识数组主要从以下几个方面去认识,一:数组具备什么样的特性,二:它能做什么,三:它具备哪些常用的api方法 //数组的原始表示方式 /* 数组的特性:1有长度,2以0开头 */ var arr1 = ...

  6. DAO模式应用实例

    首先在数据库中建好一个表. 然后创建一个MsterDao类的接口 package com.beiwo.epte.dao; import com.beiwo.epte.entity.Master; pu ...

  7. {Latex}{Tabular}文本超出表格自动换行

    用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...

  8. 新建一个UI窗口-XproerUI(MFC)教程

    版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 产品首页:http://www.ncmem.com/apps/xproerui/index.asp 在线文档(XproerUI):Xp ...

  9. FastReport 中添加二维码功能.(Delphi)

    http://www.cnblogs.com/fancycloud/archive/2011/07/24/2115240.html FastReport 中添加二维码功能.(Delphi)   在实际 ...

  10. oracle+ibatis 批量插入-支持序列自增

    首先请先看我前面一篇帖子了解oracle批量插入的sql:[oracle 批量插入-支持序列自增] 我用的ibatis2.0,sqlMap文件引入的标签如下: <!DOCTYPE sqlMap ...