背景介绍
RND，全称React Node，起源于RN在爱奇艺PC端的实现。 它采用React JS + node.JS + UI架构，旨在成为使用JS开发桌面应用程序的最轻量的跨平台解决方案。 目前爱奇艺PC端大部分页面都是基于RND开发的。
传统的JS应用开发方案是将组件注入到JS中，JS会按照开发模型来开发应用。 更多的时候，开发语言从C++换成了JS，开发思路还是一样。 React JS带来了全新的开发思路，很好的隔离了JS层与层。 业务开发基于React JS开发范式，不受约束。 为了适配自研的Lyra引擎，为业务层提供更便捷的开发设施，团队对React JS进行了深度适配。 接下来，我们将带您深入了解React JS，帮助您了解这个优雅的视图层框架。 。
反应纤维
在撰写本文时，RN 的最新版本是 0.57.8，团队适配的 RN 版本是 0.51.0，其依赖的 React 版本是 16.0.0。 本文主要讲解0.51.0。 0.51.0和0.57.8没有太大区别，基本原理是一样的。 除了将备受争议的 BSD+ 许可证更改为 MIT 许可证之外，React 16 还带来了许多新功能，例如：
1.允许在函数中返回节点数组
2.提供更好的错误处理机制：
3.支持自定义DOM属性
但最关键的一点是重写，将核心架构改为Fiber，同时保持API不变。 在介绍React的Fiber架构之前，我们先介绍几个概念：
1、React为每种类型的节点分配一个数字编号，具体为：
2. 每个控件都会对应一个 Fiber 对象节点，所有 Fiber 节点形成一棵树。 Fiber对象的结构及含义如下：
3、完整树的结构如下：
节点树主要分为两个过程：创建和更新。 每个过程可分为以下四个阶段：
创建节点
RN计划的入口如下：
其中，Index是需要渲染的根控件。 该函数将调用 . 函数将业务的根节点包装在控件中并传递给函数：
其中就是注册的根控件，它是RN提供的自定义控件。 在这个函数中，将创建一个节点，该节点被挂载到根对象的属性上。 根对象是整个节点树的根。 然后就会调用主动生成一个，要更新的数据就是传递给的参数。 这个过程可以看作是RN内部主动调用的函数。 然后调用该函数将要更新的根节点保存在变量中。 RN 中的更新从根节点开始，无论调用哪个控制函数。 最后调用该函数进入该阶段。
该阶段包含的主要函数及其调用关系如下：
首先根据节点创建要操作的节点（注意：RN不会直接处理当前节点，而是处理当前节点的副本，即节点的属性），然后从这个节点开始根据节点类型，即各种方法处理当前节点，生成下一个要处理的节点并赋值给它。 如果不为空则处理，否则执行，然后依次遍历该节点的兄弟节点和父节点的兄弟节点进行处理，直到父节点为空循环结束。 不难发现，RN按照深度优先创建和更新节点。 具体创建顺序如下图所示：
节点的操作包括新节点的创建和现有节点的更新。 如果它是空的，那就意味着创造。 节点处理主要有三种类型：自定义节点、根节点和基本控制节点。 节点是在响应节点的函数中创建和更新的。 下面主要解释这三类节点：
1.
该节点不暴露给业务层，供RN内部使用。 前面提到，在创建阶段函数中会生成一个，并存储在节点的属性中。 通过判断属性是否为空来区分是创建节点还是更新节点。 如果不为空，则取出已创建的 Fiber 节点； 如果为空（更新阶段），则直接调用获取已经创建的 Fiber 节点并返回。
2.
它是一个复合控件，即通过React创建的控件。 （es5写法）函数。 控件的创建阶段主要执行三个功能：
（1）CE：
从 Fiber 节点的 type 属性中获取控件的构造函数，然后创建一个实例并保存在控件的 Fiber 节点的属性中；
（2）：
执行实例的功能。 如果实例存在，则更新它并等待所有子节点处理完毕后再执行；
（3）：
首先执行实例的函数，然后执行函数根据函数中的返回值创建对应的 Fiber 节点。
在更新阶段，将调用以下两个函数：
(1):
判断控件是否需要更新；
根据，计算出新的状态；
标记生命周期函数何时存在
（2）：
当不需要更新时；
需要更新时执行，然后执行
3.
这个函数做的工作很少。 在创建阶段，调用该函数创建子节点的 Fiber 节点并返回。 在更新阶段，调用该函数复制子节点并返回。 在处理节点的过程中，如果遇到节点的子节点为空，则会调用该函数。 该函数根据节点类型进行相应的处理：
如果是，则在创建阶段会()实例，生成，生成命令，并将子节点添加到实例的属性中，发送命令添加节点，在更新阶段标记是否需要更新。 如果是节点，则不需要处理，因为已经在stage中处理过了。 根据节点的值，给节点的 , , 和节点的 , , 赋值，形成单链表结构。 父节点会继承子节点对应的属性值，这些值会在下一阶段进行处理。
stage执行完毕后，进入stage。 该阶段会调用以下两个函数：
从节点开始遍历，根据值进行相应的操作，如节点更新、插入、删除等。
改变root的值； 执行生命周期函数：等； 执行 ref 函数。
节点更新
节点更新阶段的处理流程如下：
节点的功能已经包括节点的创建和更新。 这里我们主要讲一下更新过程和初始化阶段。 节点的更新一般是通过调用实例的函数来触发的。 该函数将需要更新的数据保存在Fiber节点的属性中，然后从当前节点开始，到根节点为止，向上更新父节点的优先级。 然后从根节点开始进入求和阶段。
沟通机制
RND 中 JS 层之间的通信与 RN 中类似。 具体通信机制如下：
JS端模块负责消息的接收和发送。 JS端生成的命令都会存储在里面。 最后通过调用JS注入的接口函数将命令发送到底。 端类负责接收并处理JS命令。 如果JS端将实例挂载到对象上，就可以通过对象访问对象中的所有实例属性和方法。 消息通过类发送到JS端，实现方法是获取实例并在JS运行环境中动态执行代码段。 类似于浏览器中 .eval 函数的功能。 这样就完成了JS和客户端的双向通信。
优化和扩展
RND还在JS层面做了一些优化和扩展，主要集中在分割、css3动画支持、脚手架工具、声明文件扩展等方面。
RN 的大小很大，尤其是当有多个页面实例时。 因此，考虑将RN框架代码单独分离出来，形成一个公共基础，将每个页面的业务代码打包到单独的页面中，从而减少安装包大小和在线更新时的流量消耗。
我们在 RND 中添加了 CSS3 动画支持。 应用程序可以通过在样式中指定符合CSS3动画规范的属性来实现高性能的动画效果。
与RN的react-run-类似，RND也扩展了对run-等脚手架命令的支持。 最后，我们还为RND提供了ts声明文件，以支持开发者使用ts进行开发。
未来，团队将继续为 RND 添加一些新的组件和 API，特别是与桌面开发相关的功能，例如 Shell API、File API 等。
结论
至此，React JS 的整个处理流程就已经大致结束了。 本文的目的是作为一个起点。 对框架源码的分析，有助于对框架本身有更深入的了解，让我们发现自身的优缺点，并让我们在具体的使用场景下选择设计方案，进行迭代、优化、创新。
RND在爱奇艺客户端的成功实践表明，RN也适用于注重运营内容、迭代周期密集的互联网桌面应用。 JS非常适合UI和业务逻辑的快速开发。 随着各大JS引擎性能的不断优化，各大厂商都推出了基于JS语言的轻量级高性能App应用框架。 可以预见，在不久的将来，JS很快就会应用于以内容运营为主的桌面产品中。 它将成为开发者中最流行的语言之一。
