如何从头制作自定义react renderer-前置知识(1/3)

54 阅读1分钟

英文

  1. from scratch 从头开始
  2. take a look into 看一看
  3. correction 更正,改正
  4. Hence 因此

文章

React Core,Reconciler and Renderer

React Core

包含创造components的必要API

Renderer

将react tree转换成底层平台调用

Reconciler

分为两种,React 15之前的stack reconciler,转换组件树是同步的,内部维护的object tree不对外暴露,不可暂停。React 16之后为fiber reconciler,可以将可中断任务分为小的chunk执行,执行时可以区分优先级,变基和复用。在父子节点间来回遍历支持react的数据结构,更好的错误边界处理。

然后介绍了一些React的关于组件fiber的概念 当使用自定义组件时会执行它的render方法

开始构造renderer

  1. 使用cra开始一个项目
  2. 将ReactDom.render换成自定义的Renderer
  3. 自定义的render只是有一个render函数,然后打印函数的arguments
  4. 接下来使用官方暴露的react-reconciler库
  5. 使用react-reconciler生成一个实例,但是没有配置HostConfig

react-reconciler

是一个实验性的包让用户自定义react renderer

文章链接

链接