React Native的极简手册

Posted 2020-08-09

安装入门可以参考：React Native官方文档（http://reactnative.cn/docs/0.31/tutorial.html#content）。

 

NodeJS知识储备：参考《NodeJS入门》（https://leanpub.com/nodebeginner-chinese）。（尊重知识，请购买原版）。

 

书籍：《React Native入门与实战》

 

代码示例：30天学习React Native教程（https://github.com/fangwei716/30-days-of-react-native）

 

看到这里，对React Native的使用就有了一些认识了。

 

 2   React and React Native and NodeJS

 

React 是由Facebook开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护。React带来了很多新的东西，例如组 件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快，让我们从频繁操作DOM的繁重工作之中解脱。它做的工作更多偏重于MVC 中的V层，结合其它如Flux等一起，你可以非常容易构建强大的应用。

 

React 的世界里，一切都是组件。你可以构建任何直接的HTML没有的组件，例如下拉菜单、导航菜单等。同时，组件里也可以包含其它组件。每一个组件都有一个 render方法，用于呈现该组件。同时，每一个组件都有属于自己的scope，从而与其它的组件界定开来，用于构建属于该组件的方法，以方便复用（app开发ty300.com）。 JSX是基于JS的扩展，它允许你在JS里直接写HTML的代码，而不用像我们过去一样要想在JS里写HTML不得不拼接一大堆的字符串。React不直 接操作DOM，频繁的操作DOM会非常影响性能和体验。React将DOM结构储存在内存中，与render方法的返回值进行比较，通过其自由的diff 算法计算出不同的地方，然后反应到真实的DOM当中。也就是说，大多数情况我们渲染组件、更改组件状态等都是操作的虚拟DOM，只有在有所改变的情况下， 才会反应到真实的DOM当中。React Native基于ReacJS，把 React 编程模式的能力带到移动开发,用来开发ios和android原生应用.

 

NodeJs 是基于javascript的,可以做为后台开发的语言. 提供了很多系统级的API，如文件操作、网络编程等. 用事件驱动, 异步编程,主要是为后台网络服务设计.React Native 借助 Node.js，即 JavaScript 运行时来创建 JavaScript 代码。

 

总结来说，React Native使用NodeJS来做系统处理，使用React来渲染。

 

 3   构建原理

 

在AppDelegate.m里，找到

application:didFinishLaunchingWithOptions：

 

在这个方法中，主要做了几件事：

• 定义了 JS 代码所在的位置，它在 dev 环境下是一个 URL，通过 development server 访问；在生产环境下则从磁盘读取，当然前提是已经手动生成过了 bundle 文件；

• 创建了一个 RCTRootView 对象，该类继承于 UIView，处理程序所有 View 的最外层；

• 调 用 RCTRootView 的 initWithBundleURL 方法（入门教程qkxue.net）。在该方法中，创建了 bridge 对象。顾名思义，bridge 起着两个端之间的桥接作用，其中真正工作的是类就是大名鼎鼎的 RCTBatchedBridge。RCTBatchedBridge 是初始化时通信的核心，我们重点关注的是 start 方法。在 start 方法中，会创建一个 GCD 线程，该线程通过串行队列调度了以下几个关键的任务。

 

RCTRootView 用于加载 JavaScript 应用以及渲染最后的视图的。当应用开始运行的时候，RCTRootView将会从以下的URL中加载应用：

http://localhost:8081/index.ios.bundle

 

重 新调用了你运行这个App时打开的终端窗口，它开启了一个 packager 和 server 来处理上面的请求。在 Safari 中打开那个 URL；你将会看到这个 App 的 JavaScript 代码。你也可以在 React Native 框架中找到你的代码。当你的App开始运行了以后，这段代码将会被加载进来，然后 JavaScriptCore 框架将会执行它。在程序里，它将会加载 功能 组件，然后构建出原生的 UIKit 视图。JavaScript应用运行在模拟器上，使用的是原生UI，没有任何内嵌的浏览器。应用程序会使用 React.createElement 来构建应用 UI ,React会将其转换到原生环境中。

 

当 UI 渲染出来后,render 方法会返回一颗视图渲染树,并与当前的 UIKit 视图进行比较。这个称之为 reconciliation 的过程的输出是一个简单的更新列表, React 会将这个列表应用到当前视图。只有实际改变了的部分才会重新绘制。即ReactJS独特的——virtual-DOM(文档对象模型,一个web文档的视 图树)和 reconciliation概念。

 

 4   组件的生命周期

 

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM

• Updating：正在被重新渲染

• Unmounting：已移出真实 DOM

 

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

 

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

 

这些方法的详细说明，可以参考官方文档。

 

另外一个需要关注的点是，组件的style属性的设置方式不能写成

style="opacity:{this.state.opacity};"

 

而要写成

style={{opacity: this.state.opacity}}

 

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

稿源：勤快学QKxue.nET

更多React Native的极简手册介绍