React Native 框架基础

原文参考及摘录 - React Native的极简手册

组件的生命周期

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

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)：组件判断是否重新渲染时调用

JS 和 Native 交互

Native 调用 JS 是通过发送消息到 Chrome 触发执行、或者直接通过 javascriptcore 执行 JS 代码的。在 JS 端调用 Native 一般都是直接通过引用模块名，JS 把(调用模块、调用方法、调用参数) 保存到队列中；Native 调用 JS 时，顺便把队列返回过来；Native 处理队列中的参数，同样解析出(模块、方法、参数)，并通过 NSInvocation 动态调用；Native方法调用完毕后，再次主动调用 JS。JS 端通过 callbackID，找到对应JS端的 callback，进行一次调用。两端都保存了所有暴露的 Native 模块信息表作为通信的基础。

JS不会主动传递数据给OC，在调OC方法时，会把ModuleID,MethodID等数据加到一个队列里，等OC过来调JS的任意方法时，再把这个队列返回给OC，此时OC再执行这个队列里要调用的方法。native开发里，只在有事件触发的时候才执行代码。在React Native里，事件发生时OC都会调用JS相应的模块方法去处理，处理完这些事件后再执行JS想让OC执行的方法，而没有事件发生的时候，是不会执行任何代码的。

总结

React Native的通讯基础建立在传统的JS Bridge之上，不过对于Bridge处理的MessageQueue机制、模块定义、加载机制上的巧妙处理指的借鉴。对于上述的整个原理解析可以概括为以下四个部分：

• 在启动阶段，初始化JS引擎，生成Native端模块配置表存于两端，其中模块配置是同步取得，而各模块的方法配置在该方法被真正调用时懒加载。
• Native和JS端分别有一个bridge，发生调用时，调用端bridge查找模块配置表将调用转换成{moduleID, methodID, args(callbackID)}，处理端通过同一份模块配置表转换为实际的方法实现。
• Native->JS，原理上使用JSCore从Native执行JS代码，React-Native在此基础上给我们提供了通知发送的执行方式。
• JS->Native，原理上JS并不主动调用Native，而是把方法和参数(回调)缓存到队列中，在Native事件触发并访问JS后，通过blocks回调Native。

一点思考

通过原理性的探究RN通信机制，不难发现这是一种组件化思想很好的表达。我们在平时的代码结构中，经常会以模块化、组件化为目标去做架构，其中最重要的技术方案就是对“分发器”的设计。如RN机制的实现，本质上也是对JS端和Native端的各类调用的“分发”处理，通过模块配置表去匹配到要找的处理方法，也通过模块配置表去传递正确分发事件后所需的数据。

这种“分发”正是我们设计组件化架构的核心，无论我们的“乐高积木”（各个组件）是塑料还是木头所制，只要按照图纸所定义的“插槽”去设计，通过某种规范，玩家就知道如何将这块“积木”去分发到哪个部位。无论OC原生也好，JS也好甚至利用webview去自定义处理各种url也好，我们最需要的是如何设计好“分发器”来支持不同指令的分发处理，而对于组件本身实现语言的要求并不严格。