本身写个React渲染器: 以 Remax 为例(用React写小程序)

时间 2019-11-05

标签本身 react 渲染 remax 为例程序栏目 React 繁體版

原文原文链接

上个月蚂蚁金服前端发布了一个新的框架 Remax, 口号是使用真正的、完整的 React 来开发小程序.html

对于本来的 React 开发者来讲 'Learn once, write anywhere' , 和 ReactNative 开发体验差很少，而对于小程序来讲则是全新的开发体验。前端

Taro号称是‘类React’的开发方案，可是它是使用静态编译的方式实现，边柳在它的《Remax - 使用真正的 React 构建小程序》文章中也提到了这一点:node

所谓静态编译，就是使用工具把代码语法分析一遍，把其中的 JSX 部分和逻辑部分抽取出来，分别生成小程序的模板和 Page 定义。react

这种方案实现起来比较复杂，且运行时并无 React 存在。git

相比而言，Remax 的解决方案就简单不少，它不过就是新的React渲染器.github

由于 Remax 刚发布不久，核心代码比较简单，感兴趣的能够去 github 观摩贡献
能够经过 CodeSandbox 游乐场试玩自定义Renderer: Edit react-custom-renderer
文章看起来比较长，好戏在后头，一步一步来 🦖算法

文章大纲小程序

关于React的一些基本概念

建立一个 React 自定义渲染器，你须要对React渲染的基本原理有必定的了解。因此在深刻阅读本文以前，先要确保你可以理解如下几个基本概念:微信小程序

1. Element微信

咱们能够经过 JSX 或者 React.createElement 来建立 Element，用来描述咱们要建立的视图节点。好比:

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>
复制代码

JSX 会被转义译为:

React.createElement(
  "button",
  { class: 'button button-blue' },
  React.createElement("b", null, "OK!")
)
复制代码

React.createElement 最终构建出相似这样的对象:

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}
复制代码

也就是说 Element 就是一个普通的对象，描述用户建立的节点类型、props 以及 children。这些 Elements 组合成树，描述用户视图

2. Component

能够认为是 Element 的类型，它有两种类型：

Host Component: 宿主组件，这是由渲染的平台提供的‘内置’组件，例如ReactDOM 平台下面的 DOM 节点，如 div、span... 这些组件类型为字符串
Composite Component: 复合组件，这是一种用户自定义的组件封装单位。一般包含自定义的逻辑、状态以及输出 Element 树。复合类型能够为类或函数

const DeleteAccount = () => (
  <div> <p>Are you sure?</p> <DangerButton>Yep</DangerButton> <Button color='blue'>Cancel</Button> </div>
);
复制代码

3. Instance

当 React 开始渲染一个 Element 时，会根据组件类型为它建立一个‘实例’，例如类组件，会调用new操做符实例化。这个实例会一直引用，直到 Element 从 Element Tree 中被移除。

首次渲染: React 会实例化一个 MyButton 实例，调用挂载相关的生命周期方法，并执行 render 方法，递归渲染下级

render(<MyButton>foo</MyButton>, container)
复制代码

更新: 由于组件类型没有变化，React 不会再实例化，这个属于‘节点更新’，React 会执行更新相关的生命周期方法，如shouldComponentUpdate。若是须要更新则再次执行render方法

render(<MyButton>bar</MyButton>, container)
复制代码

卸载: 组件类型不同了, 原有的 MyButton 被替换. MyButton 的实例将要被销毁，React 会执行卸载相关的生命周期方法，如componentWillUnmount

render(<button>bar</button>, container)
复制代码

4. Reconciler & Renderer

Reconciler 和 Renderer 的关系能够经过下图缕清楚.

Reconciler 的职责是维护 VirtualDOM 树，内部实现了 Diff/Fiber 算法，决定何时更新、以及要更新什么

而 Renderer 负责具体平台的渲染工做，它会提供宿主组件、处理事件等等。例如ReactDOM就是一个渲染器，负责DOM节点的渲染和DOM事件处理。

5. Fiber 的两个阶段 React 使用了 Fiber 架构以后，更新过程被分为两个阶段(Phase)

协调阶段(Reconciliation Phase) 这个阶段 React 会找出须要更新的节点。这个阶段是能够被打断的，好比有优先级更高的事件要处理时。
提交阶段(Commit Phase) 将上一个阶段计算出来的须要处理的**反作用(Effects)**一次性执行了。这个阶段必须同步执行，不能被打断

若是按照render为界，能够将生命周期函数按照两个阶段进行划分：

协调阶段
- constructor
- componentWillMount 废弃
- componentWillReceiveProps 废弃
- static getDerivedStateFromProps
- shouldComponentUpdate
- componentWillUpdate 废弃
- render
- getSnapshotBeforeUpdate()
提交阶段
- componentDidMount
- componentDidUpdate
- componentWillUnmount

没理解？那么下文读起来对你可能比较吃力，建议阅读一些关于React基本原理的相关文章。

就目前而言，React 大部分核心的工做已经在 Reconciler 中完成，好在 React 的架构和模块划分还比较清晰，React官方也暴露了一些库，这极大简化了咱们开发 Renderer 的难度。开始吧！

自定义React渲染器

React官方暴露了一些库供开发者来扩展自定义渲染器：

react-reconciler - 这就是 React 的协调器, React 的核心所在。咱们主要经过它来开发渲染器。
scheduler - 合做调度器的一些 API 。本文不会用到

须要注意的是，这些包仍是实验性的，API可能不太稳定。另外，没有详细的文档，你须要查看源代码或者其余渲染器实现；本文以及扩展阅读中的文章也是很好的学习资料。

建立一个自定义渲染器只需两步:

第一步: 实现宿主配置，这是react-reconciler要求宿主提供的一些适配器方法和配置项。这些配置项定义了如何建立节点实例、构建节点树、提交和更新等操做。下文会详细介绍这些配置项

const Reconciler = require('react-reconciler');

const HostConfig = {
  // ... 实现适配器方法和配置项
};
复制代码

第二步：实现渲染函数，相似于ReactDOM.render() 方法

// 建立Reconciler实例, 并将HostConfig传递给Reconciler
const MyRenderer = Reconciler(HostConfig);

/** * 假设和ReactDOM同样，接收三个参数 * render(<MyComponent />, container, () => console.log('rendered')) */
export function render(element, container, callback) {
  // 建立根容器
  if (!container._rootContainer) {
    container._rootContainer = ReactReconcilerInst.createContainer(container, false);
  }

  // 更新根容器
  return ReactReconcilerInst.updateContainer(element, container._rootContainer, null, callback);
}
复制代码

容器既是 React 组件树挂载的目标(例如 ReactDOM 咱们一般会挂载到 #root 元素，#root 就是一个容器)、也是组件树的 根Fiber节点(FiberRoot)。根节点是整个组件树的入口，它将会被 Reconciler 用来保存一些信息，以及管理全部节点的更新和渲染。

关于 Fiber 架构的一些细节能够看这些文章:

《译深刻React fiber架构及源码》
《React Fiber》有能力的同窗，能够直接看Lin Clark的演讲

HostConfig 渲染器适配

HostConfig 支持很是多的参数，完整列表能够看这里. 下面是一些自定义渲染器必须提供的参数：

interface HostConfig {
  /** * 用于分享一些上下文信息 */
  // 获取根容器的上下文信息, 只在根节点调用一次
  getRootHostContext(rootContainerInstance: Container): HostContext;
  // 获取子节点的上下文信息, 每遍历一个节点都会调用一次
  getChildHostContext(parentHostContext: HostContext, type: Type, rootContainerInstance: Container): HostContext;


  /** * 节点实例的建立 */
  // 普通节点实例建立，例如DOM的Element类型
  createInstance(type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: OpaqueHandle,): Instance;
  // 文本节点的建立，例如DOM的Text类型
  createTextInstance(text: string, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: OpaqueHandle): TextInstance;
  // 决定是否要处理子节点/子文本节点. 若是不想建立则返回true. 例如ReactDOM中使用dangerouslySetInnerHTML, 这时候子节点会被忽略
  shouldSetTextContent(type: Type, props: Props): boolean;

  /** * 节点树构建 */
  // 若是节点在*未挂载*状态下，会调用这个来添加子节点
  appendInitialChild(parentInstance: Instance, child: Instance | TextInstance): void;
  // **下面都是反作用(Effect)，在’提交‘阶段被执行**
  // 添加子节点
  appendChild?(parentInstance: Instance, child: Instance | TextInstance): void;
  // 添加子节点到容器节点(根节点)
  appendChildToContainer?(container: Container, child: Instance | TextInstance): void;
  // 插入子节点
  insertBefore?(parentInstance: Instance, child: Instance | TextInstance, beforeChild: Instance | TextInstance): void;
  // 插入子节点到容器节点(根节点)
  insertInContainerBefore?(container: Container, child: Instance | TextInstance, beforeChild: Instance | TextInstance,): void;
  // 删除子节点
  removeChild?(parentInstance: Instance, child: Instance | TextInstance): void;
  // 从容器节点(根节点)中移除子节点
  removeChildFromContainer?(container: Container, child: Instance | TextInstance): void;

  /** * 节点挂载 */
  // 在完成全部子节点初始化时(全部子节点都appendInitialChild完毕)时被调用, 若是返回true，则commitMount将会被触发
  // ReactDOM经过这个属性和commitMount配置实现表单元素的autofocus功能
  finalizeInitialChildren(parentInstance: Instance, type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext): boolean;
  // 和finalizeInitialChildren配合使用，commitRoot会在’提交‘完成后(resetAfterCommit)执行, 也就是说组件树渲染完毕后执行
  commitMount?(instance: Instance, type: Type, newProps: Props, internalInstanceHandle: OpaqueHandle): void;

  /** * 节点更新 */
  // 准备节点更新. 若是返回空则表示不更新，这时候commitUpdate则不会被调用
  prepareUpdate(instance: Instance, type: Type, oldProps: Props, newProps: Props, rootContainerInstance: Container, hostContext: HostContext,): null | UpdatePayload;
  // **下面都是反作用(Effect)，在’提交‘阶段被执行**
  // 文本节点提交
  commitTextUpdate?(textInstance: TextInstance, oldText: string, newText: string): void;
  // 普通节点提交
  commitUpdate?(instance: Instance, updatePayload: UpdatePayload, type: Type, oldProps: Props, newProps: Props, internalInstanceHandle: OpaqueHandle): void;
  // 重置普通节点文本内容, 这个须要和shouldSetTextContent(返回true时)配合使用，
  resetTextContent?(instance: Instance): void;

  /** * 提交 */
  // 开始’提交‘以前被调用，好比这里能够保存一些状态，在’提交‘完成后恢复状态。好比ReactDOM会保存当前元素的焦点状态，在提交后恢复
  // 执行完prepareForCommit，就会开始执行Effects(节点更新)
  prepareForCommit(containerInfo: Container): void;
  // 和prepareForCommit对应，在提交完成后被执行
  resetAfterCommit(containerInfo: Container): void;


  /** * 调度 */
  // 这个函数将被Reconciler用来计算当前时间, 好比计算任务剩余时间 
  // ReactDOM中会优先使用Performance.now, 普通场景用Date.now便可
  now(): number;
  // 自定义计时器
  setTimeout(handler: (...args: any[]) => void, timeout: number): TimeoutHandle | NoTimeout;
  // 取消计时器
  clearTimeout(handle: TimeoutHandle | NoTimeout): void;
  // 表示一个空的计时器，见👆clearTimeout的签名
  noTimeout: NoTimeout;

  // ? 功能未知
  shouldDeprioritizeSubtree(type: Type, props: Props): boolean;
  // 废弃
  scheduleDeferredCallback(callback: () => any, options?: { timeout: number }): any;
  // 废弃
  cancelDeferredCallback(callbackID: any): void;


  /** * 功能开启 */
  // 开启节点修改，通常渲染器都会开启，否则没法更新节点
  supportsMutation: boolean;
  // 开启持久化 ?
  supportsPersistence: boolean;
  // 开启hydrate，通常用于服务端渲染
  supportsHydration: boolean;

  /** * 杂项 */
  // 获取可公开的节点实例，即你愿意暴露给用户的节点信息，用户经过ref能够获取到这个对象。通常自定义渲染器原样返回便可, 除非你想有选择地给用户暴露信息
  getPublicInstance(instance: Instance | TextInstance): PublicInstance;

  // ... 还有不少参数，因为通常渲染器不会用到，暂时不讲了
}
复制代码

若是按照Fiber的两个阶段来划分的话，接口分类是这样的:

协调阶段	开始提交	提交阶段	提交完成
createInstance	prepareCommit	appendChild	resetAfterCommit
createTextInstance		appendChildToContainer	commitMount
shouldSetTextContent		insertBefore
appendInitialChild		insertInContainerBefore
finalizeInitialChildren		removeChild
prepareUpdate		removeChildFromContainer
		commitTextUpdate
		commitUpdate
		resetTextContent

经过上面接口定义能够知道 HostConfig 配置比较丰富，涉及节点操做、挂载、更新、调度、以及各类生命周期钩子, 能够控制渲染器的各类行为.

看得有点蒙圈？不要紧, 你暂时没有必要了解全部的参数，下面会一点一点展开解释这些功能。你能够最后再回来看这里。

宿主组件

React中有两种组件类型，一种是宿主组件(Host Component), 另外一种是复合组件(CompositeComponent). 宿主组件是平台提供的，例如 ReactDOM 平台提供了 div、span、h1... 等组件. 这些组件一般是字符串类型，直接渲染为平台下面的视图节点。

而复合组件，也称为自定义组件，用于组合其余复合组件和宿主组件，一般是类或函数。

渲染器不须要关心复合组件的处理, Reconciler 交给渲染器的是一颗宿主组件树。

固然在 Remax 中，也定义了不少小程序特定的宿主组件，好比咱们能够这样子使用它们:

function MyComp() {
  return <view><text>hello world</text></view>
}
复制代码

Reconciler 会调用 HostConfig 的 createInstance 和createTextInstance 来建立宿主组件的实例，因此自定义渲染器必须实现这两个方法. 看看 Remax 是怎么作的：

const HostConfig = {
  // 建立宿主组件实例
  createInstance(type: string, newProps: any, container: Container) {
    const id = generate();
    // 预处理props, remax会对事件类型Props进行一些特殊处理
    const props = processProps(newProps, container, id);
    return new VNode({
      id,
      type,
      props,
      container,
    });
  },

  // 建立宿主组件文本节点实例
  createTextInstance(text: string, container: Container) {
    const id = generate();
    const node = new VNode({
      id,
      type: TYPE_TEXT,
      props: null,
      container,
    });
    node.text = text;
    return node;
  },

  // 判断是否须要处理子节点。若是返回true则不建立，整个下级组件树都会被忽略。
  // 有一些场景是不须要建立文本节点的，而是由父节点内部消化。
  // 举个例子，在ReactDOM中，若是某个节点设置了dangerouslySetInnerHTML，那么它的children应该被忽略，
  // 这时候 shouldSetTextContent则应该返回true
  shouldSetTextContent(type, nextProps) {
    return false
  }
}

复制代码

在 ReactDOM 中上面两个方法分别会经过 document.createElement 和 document.createTextNode 来建立宿主组件(即DOM节点)。

上面是微信小程序的架构图(图片来源: 一块儿脱去小程序的外套 - 微信小程序架构解析)。

由于小程序隔离了渲染进程和逻辑进程。Remax 是跑在逻辑进程上的，在逻辑进程中没法进行实际的渲染, 只能经过setData方式将更新指令传递给渲染进程后，再进行解析渲染。

因此Remax选择在逻辑进程中先构成一颗镜像树(Mirror Tree), 而后再同步到渲染进程中，以下图:

上面的 VNode 就是镜像树中的虚拟节点，主要用于保存一些节点信息，不作任何特殊处理, 它的结构以下:

export default class VNode {
  id: number;                  // 惟一的节点id
  container: Container;
  children: VNode[];           // 子节点
  mounted = false;             // 节点是否已经挂载
  type: string | symbol;       // 节点的类型
  props?: any;                 // 节点的props
  parent: VNode | null = null; // 父节点引用
  text?: string;               // 若是是文本节点，这里保存文本内容
  path(): Path                 // 节点的路径. 同步到渲染进程后，经过path恢复到树中
  // 子节点操做
  appendChild(node: VNode, immediately: boolean)
  removeChild(node: VNode, immediately: boolean)
  insertBefore(newNode: VNode, referenceNode: VNode, immediately: boolean)

  update()                     // 触发同步到渲染进程
  toJSON(): string
}
复制代码

VNode 的完整代码能够看这里

镜像树的构建和操做

要构建出完整的节点树须要实现HostConfig 的 appendChild、insertBefore、removeChild 等方法, 以下，这些方法都比较容易理解，因此不须要过多解释。

const HostConfig = {
  // ...

  // 支持节点修改
  // 有些静态渲染的场景，例如渲染为pdf文档，这时候能够关闭
  // 当关闭时，只须要实现appendInitiaChild
  supportsMutation: true,

  // 用于初始化(首次)时添加子节点
  appendInitialChild: (parent: VNode, child: VNode) => {
    parent.appendChild(child, false);
  },

  // 添加子节点
  appendChild(parent: VNode, child: VNode) {
    parent.appendChild(child, false);
  },

  // 插入子节点
  insertBefore(parent: VNode, child: VNode, beforeChild: VNode) {
    parent.insertBefore(child, beforeChild, false);
  },

  // 删除节点
  removeChild(parent: VNode, child: VNode) {
    parent.removeChild(child, false);
  },

  // 添加节点到容器节点，通常状况咱们不须要和appendChild特殊区分
  appendChildToContainer(container: any, child: VNode) {
    container.appendChild(child);
    child.mounted = true;
  },

  // 插入节点到容器节点
  insertInContainerBefore(container: any, child: VNode, beforeChild: VNode) {
    container.insertBefore(child, beforeChild);
  },

  // 从容器节点移除节点
  removeChildFromContainer(container: any, child: VNode) {
    container.removeChild(child);
  },
}
复制代码

节点更新

上一节讲的是树结构层面的更新，当节点属性变更或者文本内容变更时，也须要进行更新。咱们能够经过下列 HostConfig 配置来处理这类更新:

const HostConfig = {
  /** * 更新相关 */
  // 能够在这里比对props，若是props没有变化则不进行更新，这和React组件的shouldComponentUpdate差很少
  // **返回’空‘则表示不更新该节点, 这时候commitUpdate则不会被调用**
  prepareUpdate(node: VNode, type: string, oldProps: any, newProps: any) {
    oldProps = processProps(oldProps, node.container, node.id);
    newProps = processProps(newProps, node.container, node.id);
    if (!shallowequal(newProps, oldProps)) {
      return true;
    }
    return null;
  },

  // 进行节点更新
  commitUpdate(
    node: VNode,
    updatePayload: any,
    type: string,
    oldProps: any,
    newProps: any
  ) {
    node.props = processProps(newProps, node.container, node.id);
    node.update();
  },

  // 进行文本节点更新
  commitTextUpdate(node: VNode, oldText: string, newText: string) {
    if (oldText !== newText) {
      node.text = newText;
      // 更新节点
      node.update();
    }
  },
}
复制代码

Ok, 这个也比较好理解。对于普通节点更新，Reconciler 会先调用 prepareUpdate, 肯定是否要更新，若是返回非空数据，Reconciler 就会将节点放入 Effects 链中，在提交阶段调用 commitUpdate 来执行更新。文本节点更新则直接调用 commitTextUpdate，不在话下.

反作用提交

React 的更新的两个阶段这个概念很是重要，这个也体如今HostConfig上:

const HostConfig = {
  // Reconciler说，我要开始提交了，你提交前要作什么，就在这作吧
  // 好比ReactDOM会在这里保存当前DOM文档的选中状态和焦点状态, 以及禁用事件处理。由于DOM更新可能会破坏这些状态
  prepareForCommit: () => {},

  // Reconciler说，我已经提交完了
  // ReactDOM会在这里恢复提交前的DOM文档的选中状态和焦点状态
  resetAfterCommit: () => {},




  // 在协调阶段，当一个节点完成'建立'后调用。若是有子节点，则在全部子节点appendInitialChild完成后调用
  // 返回一个boolean值表示’完成提交‘后是否要调用commitMount. 通俗讲就是告诉Reconciler，当前节点完成’挂载‘后要执行某些东西
  // ReactDOM会使用这个钩子来处理带有autofoucs属性的节点，在commitMount中实现自动获取焦点
  finalizeInitialChildren: () => false,

  // 和finalizeInitialChildren配合使用，若是前者返回true，在Reconciler完成提交后，对应节点的commitMount会被执行
  commitMount: () => {},
}
复制代码

将上文讲到的全部钩子都聚合起来，按照更新的阶段和应用的目标(target)进行划分，它们的分布是这样的：

那么对于 Remax 来讲, 何时应该将'更新'提交到渲染进程呢？答案是上图全部在提交阶段的方法被调用时。

提交阶段原意就是用于执行各类反作用的，例如视图更新、远程方法请求、订阅... 因此 Remax 也会在这个阶段收集更新指令，在下一个循环推送给渲染进程。

HostConfig执行流程总结

回顾一下自定义渲染器各类方法调用的流程, 首先看一下挂载的流程:

假设咱们的组件结构以下:

const container = new Container()
const MyComp = () => {
  return (
    <div> <span>hello world</span> </div>
  )
}

render(
  <div className="root"> <MyComp /> <span>--custom renderer</span> </div>,
  container,
  () => {
    console.log("rendered")
  },
)
复制代码

React 组件树的结构以下(左图)，但对于渲染器来讲，树结构是右图。自定义组件是React 层级的东西，渲染器只须要关心最终须要渲染的视图结构, 换句话说渲染器只关心宿主组件:

挂载会经历如下流程:

经过上面的流程图，能够很清晰看到每一个钩子的调用时机。

同理，咱们再来看一下节点更新时的流程. 咱们稍微改造一下上面的程序，让它定时触发更新:

const MyComp = () => {
  const [count, setCount] = useState(1)
  const isEven = count % 2 === 0
  useEffect(() => {
    const timer = setInterval(() => {
      // 递增计数器
      setCount(c => c + 1)
    }, 10000)

    return () => clearInterval(timer)
  }, [])

  return (
    <div className="mycomp" style={{ color: isEven ? "red" : "blue" }}> {isEven ? <div>even</div> : null} <span className="foo">hello world {count}</span> </div>
  )
}
复制代码

下面是更新的流程:

当MyComp的 count 由1变为2时，MyComp 会被从新渲染，这时候新增了一个div 节点(红色虚框), 另外 hello world 1 也变成了 hello world 2。

新增的 div 节点建立流程和挂载时同样，只不过它不会当即插入到父节点中，而是先放到Effect链表中，在提交阶段统一执行。

同理hello world {count}文本节点的更新、以及其余节点的 Props 更新都是放到Effect链表中，最后时刻才更新提交. 如上图的 insertBefore、commitTextUpdate、commitUpdate.

另一个比较重要的是 prepareUpdate 钩子，你能够在这里告诉 Reconciler，节点是否须要更新，若是须要更新则返回非空值，这样 commitUpdate 才会被触发。

同步到渲染进程

React 自定义渲染器差很少就这样了，接下来就是平台相关的事情了。 Remax 目前的作法是在触发更新后，经过小程序 Page 对象的 setData 方法将更新指令传递给渲染进程; 渲染进程侧再经过 WXS 机制，将更新指令恢复到树中；最后再经过模板机制，将树递归渲染出来。

总体的架构以下:

先来看看逻辑进程侧是如何推送更新指令的：

// 在根容器上管理更新
export default class Container {
  // ...
  // 触发更新
  requestUpdate(
    path: Path,
    start: number,
    deleteCount: number,
    immediately: boolean,
    ...items: RawNode[]
  ) {
    const update: SpliceUpdate = {
      path, // 更新节点的树路径
      start, // 更新节点在children中的索引
      deleteCount,
      items, // 当前节点的信息
    };
    if (immediately) {
      this.updateQueue.push(update);
      this.applyUpdate();
    } else {
      // 放入更新队列，延时收集更新指令
      if (this.updateQueue.length === 0) {
        setTimeout(() => this.applyUpdate());
      }
      this.updateQueue.push(update);
    }
  }

  applyUpdate() {
    const action = {
      type: 'splice',
      payload: this.updateQueue.map(update => ({
        path: stringPath(update.path),
        start: update.start,
        deleteCount: update.deleteCount,
        item: update.items[0],
      })),
    };

    // 经过setData通知渲染进程
    this.context.setData({ action });
    this.updateQueue = [];
  }
}
复制代码

逻辑仍是比较清楚的，即将须要更新的节点(包含节点路径、节点信息)推入更新队列，而后触发 setData 通知到渲染进程。

渲染进程侧，则须要经过 WXS 机制，相对应地将更新指令恢复到渲染树中：

// 渲染树
var tree = {
  root: {
    children: [],
  },
};

// 将指令应用到渲染树
function reduce(action) {
  switch (action.type) {
    case 'splice':
      for (var i = 0; i < action.payload.length; i += 1) {
        var value = get(tree, action.payload[i].path);
        if (action.payload[i].item) {
          value.splice(
            action.payload[i].start,
            action.payload[i].deleteCount,
            action.payload[i].item
          );
        } else {
          value.splice(action.payload[i].start, action.payload[i].deleteCount);
        }
        set(tree, action.payload[i].path, value);
      }
      return tree;
    default:
      return tree;
  }
}
复制代码

OK, 接着开始渲染, Remax 采用了模板的形式进行渲染:

<wxs src="../../helper.wxs" module="helper" />
<import src="../../base.wxml"/>
<template is="REMAX_TPL" data="{{tree: helper.reduce(action)}}" />
复制代码

Remax 为每一个组件类型都生成了一个template，动态'递归'渲染整颗树:

<template name="REMAX_TPL">
  <block wx:for="{{tree.root.children}}" wx:key="{{id}}">
    <template is="REMAX_TPL_1_CONTAINER" data="{{i: item}}" />
  </block>
</template>

<wxs module="_h">
  module.exports = {
  v: function(value) {
  return value !== undefined ? value : '';
  }
  };
</wxs>


<% for (var i = 1; i <= depth; i++) { %>
<%var id = i; %>

<% for (let component of components) { %>
<%- include('./component.ejs', {
        props: component.props,
        id: component.id,
        templateId: id,
      }) %>
<% } %>
<template name="REMAX_TPL_<%=id%>_plain-text" data="{{i: i}}">
  <block>{{i.text}}</block>
</template>

<template name="REMAX_TPL_<%=id%>_CONTAINER" data="{{i: i}}">
  <template is="{{'REMAX_TPL_<%=id%>_' + i.type}}" data="{{i: i}}" />
</template>
<% } %>
复制代码

限于小程序的渲染机制，如下因素可能会影响渲染的性能:

进程IPC。更新指令经过IPC通知到渲染进程，频繁更新可能会影响性能. ReactNative 中涉及到 Native 和 JS引擎之间的通讯，也是存在这个问题的。因此小程序才有了 WXS 这类方案，用来处理复杂的视图交互问题，好比动画。将来 Remax 也须要考虑这个问题
Reconciler这一层已经进行了 Diff，到渲染进程可能须要重复再作一遍？
基于模板的方案，局部更新是否会致使页面级别从新渲染？和小程序原生的自定义组件相比性能如何？

总结

本文以 Remax 为例，科普一个 React 自定义渲染器是如何运做的。对于 Remax，目前还处于开发阶段，不少功能还不完善。至于性能如何，笔者还很差作评论，能够看官方给出的初步基准测试。有能力的同窗，能够参与代码贡献或者 Issue 讨论。

最后谢谢边柳对本文审校和建议。