![\"size200\"](\"//images.ctfassets.net/49fdbwmpdowy/2FvoJn52wrvyFknULPEirW/f367201b0d80abf697121d181c9e5f98/5628dd6ecd9fa100f371_size30_w521_h534.jpg\")
目前React的应用场景不仅限于Web App，也有很多人用来完成2D画图库、3D图形库、命令行库等工具。无论处于哪种宿主环境中，React生态大致包括如下基本概念/功能：
\n除内置组件与宿主相关(如React Native中包括View, Text等特定组件）以外，上述逻辑功能在跨平台的环境中是通用的。
\n这些通用的部分就交给reconciler来实现，当有更新出现时，reconciler就会调用render。这篇文章不会介绍调度算法的内容，可以阅读理解React Fiber架构了解更多。
\nSophie Alpert在会上还提到了react-reconciler使用时的两个模式：Mutation模式和Persistent模式。
\n我们对DOM的修改，即ReactDOM就遵循该模式。我们通过改变已有的BOM/DOM的属性来render，这也是DOM自身的工作原理。伪代码如下：
\nview = createView()\nupdateView(view, {color: 'red'}) // 更新已有视图\n\ndiv = document.createElement('div');\ndiv.style.color = 'red';当API将系统当成Immutable Object时，我们会将整个视图替换成另一版本。因为React Native拥有对host的绝对控制，所以下一版本的RN采用此模式实现Concurrency。
\nview = createView();\ncloneView(view, {color: 'red'}); // 克隆新视图现在我们要用react-reconciler来替代ReactDOM，做一个简版的渲染器，以便更好的了解React的工作原理。实现诸如以下指令：
\n首先，我们用create-react-app创建一个项目，安装react-reconciler依赖。然后，用我们要实现的ReactDOMMini替代ReactDOM。
\n// import ReactDOM from 'react-dom';\nimport ReactDOMMini from './ReactDOMMini';\n...\nReactDOMMini.render(<App />, document.getElementById('root'));在ReactDOMMini中，我们需要对宿主环境进行配置，然后更新视图。react-reconciler的API如下：
\nconst Reconciler = require('react-reconciler');\n\nconst HostConfig = {\n // You'll need to implement some methods here.\n // See below for more information and examples.\n};\nconst MyRenderer = Reconciler(HostConfig);\nconst RendererPublicAPI = {\n render(element, container, callback) {\n // Call MyRenderer.updateContainer() to schedule changes on the roots.\n // See ReactDOM, React Native, or React ART for practical examples.\n }\n};\n\nmodule.exports = RendererPublicAPI;我们需要在hostConfig里对宿主环境进行配置，描述协调器工作时需要宿主环境发生怎样的变化。HostConfig相当于一个桥梁，用户通过参数声明的方式传给配置项，reconciler将其作为module引入。
\n在这里也可以看到DOM的HostConfig的实现。
\n我们先写一些基本的配置项：
\nconst hostConfig = {\n supportsMutation: true, // 开启mutating模式\n createInstance: (\n type,\n props,\n rootContainerInstance,\n hostContext,\n internalInstanceHandle\n ) => {},\n createTextInstance: (\n text,\n rootContainerInstance,\n hostContext,\n internalInstanceHandle\n ) => {},\n appendInitialChild: (parent, child) => {},\n appendChildToContainer: (container, child) => {},\n removeChildFromContainer: (container, child) => {},\n getRootHostContext: () => {},\n prepareForCommit: () => {},\n resetAfterCommit: () => {},\n getChildHostContext: () => {},\n shouldSetTextContent: () => {},\n finalizeInitialChildren: () => {}\n}\nconst reconciler = reactReconciler(hostConfig);\nexport default {\n render(reactElement, domEle, callback) {\n if (!domEle._rootContainer) {\n domEle._rootContainer = reconciler.createContainer(domEle, false, false);\n }\n reconciler.updateContainer(reactElement, domEle._rootContainer, null, callback);\n }\n};render方法就做了两件事，创建rootContainer和根据reconciler更新container。它接收的第三个参数是可选回调，这里不需要。
\n我们写的这些配置项防止页面报错，也是告诉reconciler引入这些函数。我们使用mutation模式，以便目标（例如DOM）UI API支持UI树的更新（像appendChild, removeChild的操作等）。
\n目前页面上还是空白的，下面是见证奇迹的时刻。为createInstance、createTextInstance、appendInitialChild、appendChildToContainer增加渲染逻辑:
\ncreateInstance: (\n type,\n props,\n rootContainerInstance,\n hostContext,\n internalInstanceHandle\n) => document.createElement(type),\ncreateTextInstance: (\n text,\n rootContainerInstance,\n hostContext,\n internalInstanceHandle\n) => document.createTextNode(text),\nappendInitialChild: (parent, child) => {\n parent.appendChild(child);\n},\nappendChildToContainer: (container, child) => {\n container.appendChild(child);\n},可以看到页面上，文本节点已经被渲染出来了。但是我们的图片元素没有展示，a标签链接功能失效。基于上述描述，修改createInstance：
\ncreateInstance: (\n type,\n props,\n rootContainer,\n hostContext,\n internalInstanceHandle\n) => {\n const el = document.createElement(type);\n Object.keys(props).forEach(propName => {\n if (propName !== 'children') {\n el[propName] = props[propName];\n }\n else {\n // 打印一下children是什么\n console.log(propName, props[propName]);\n }\n });\n return el;\n}为实例元素增加attribute之后，可以看到背景及图片都显示正常，我们的小目标也实现了。
\n接下来的工作是，通过点击class为App的DOM，使react logo动态显示。首先写我们的业务：
\n// App.js\n ...\n const [showLogo, setShowLogo] = useState(true);\n return (\n <div className=\"App\" onClick={() => {\n setShowLogo(show => !show);\n }}>\n <header className=\"App-header\">\n {showLogo && <img src={logo} className=\"App-logo\" alt=\"logo\" />}\n ...点击却发现onClick没有反应，说明我们刚才只赋值了静态属性，没有添加事件监听。在createInstance添加以下逻辑:
\nif (propName === 'onClick') {\n el.addEventListener('click', props[propName]);\n}\nelse {\n el[propName] = props[propName];\n}满心欢喜的点了一下页面以为everything under control了，结果。。。\n
！！！控制台报错了，查看以下API我们发现，需要配置dom remove及insert的module。
\nremoveChildFromContainer: (container, child) => {\n container.removeChild(child);\n},\nremoveChild: (parent, child) => {\n parent.removeChild(child);\n},\ninsertInContainerBefore: (container, child, before) => {\n container.insertBefore(child, before);\n},\ninsertBefore: (parent, child, before) => {\n parent.insertBefore(child, before);\n},四个模块都比较好理解，包含container的是commit阶段触发的行为。又实现了一个小目标。
\n最后一个任务是，用一个自定义属性控制p标签的背景色定时切换，我们还是先写简单的业务逻辑：
\n// App.js\n...\nconst [color, setColor] = useState('red');\nuseEffect(() => {\n const colors = ['red', 'green', 'blue'];\n let i = 0;\n const interval = setInterval(() => {\n i++;\n setColor(colors[i % 3]);\n }, 1000);\n return () => clearInterval(interval);\n}, []);\n...\n<p bgColor={color}>\n Edit <code>src/App.js</code> and save to reload.\n</p>\n...要完成这个任务，我们需要两个新的module，prepareUpdate和commitUpdate：
\nprepareUpdate: (\n instance,\n type,\n oldProps,\n newProps,\n rootContainerInstance,\n currentHostContext\n) => {\n let payload;\n if (oldProps.bgColor !== newProps.bgColor) {\n payload = {newBgColor: newProps.bgColor};\n }\n return payload;\n},\ncommitUpdate: (\n instance,\n updatePayload,\n type,\n oldProps,\n newProps,\n finishedWork\n) => {\n if (updatePayload.newBgColor) {\n instance.style.backgroundColor = updatePayload.newBgColor;\n }\n}到这里我们就依赖fiber-reconciler完成了一个mini版本的ReactDOM的render操作，仔细想想我们还是有很多功能没有实现，例如form controls、refs、svg、portals、事件冒泡等。要想用好fiber-reconciler的module，需要理解currentTree和workInProgressTree，render阶段和commit阶段，感兴趣的同学可以接下来自己深入研究。
\n附上ReactDOMMini不到100行的全部代码，去掉了没用到的参数：
\n/**\n * @file ReactDOMMini.js\n * @create date 2019-10-30 15:53:15\n * @modify date 2019-10-31 15:15:29\n */\nimport reactReconciler from 'react-reconciler';\n\nconst hostConfig = {\n /* 宿主环境配置 */\n supportsMutation: true,\n getRootHostContext: () => { },\n prepareForCommit: () => { },\n resetAfterCommit: () => { },\n getChildHostContext: () => { },\n shouldSetTextContent: () => { },\n finalizeInitialChildren: () => { },\n createInstance: (\n type,\n props\n ) => {\n const el = document.createElement(type);\n Object.keys(props).forEach(propName => {\n if (propName !== 'children') {\n if (propName === 'onClick') {\n el.addEventListener('click', props[propName]);\n }\n else {\n el[propName] = props[propName];\n }\n }\n });\n return el;\n },\n createTextInstance: text => document.createTextNode(text),\n appendInitialChild: (parent, child) => {\n parent.appendChild(child);\n },\n appendChildToContainer: (container, child) => {\n container.appendChild(child);\n },\n removeChildFromContainer: (container, child) => {\n container.removeChild(child);\n },\n removeChild: (parent, child) => {\n parent.removeChild(child);\n },\n insertInContainerBefore: (container, child, before) => {\n container.insertBefore(child, before);\n },\n insertBefore: (parent, child, before) => {\n parent.insertBefore(child, before);\n },\n prepareUpdate: (\n instance,\n type,\n oldProps,\n newProps\n ) => {\n let payload;\n if (oldProps.bgColor !== newProps.bgColor) {\n payload = {newBgColor: newProps.bgColor};\n }\n return payload;\n },\n commitUpdate: (\n instance,\n updatePayload,\n ) => {\n if (updatePayload.newBgColor) {\n instance.style.backgroundColor = updatePayload.newBgColor;\n }\n }\n};\n\nconst reconciler = reactReconciler(hostConfig);\nexport default {\n render(reactElement, domEle, callback) {\n if (!domEle._rootContainer) {\n domEle._rootContainer = reconciler.createContainer(domEle, false, false);\n }\n reconciler.updateContainer(reactElement, domEle._rootContainer, null, callback);\n }\n};