前言

React 是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读 React：从零开始实现一个 React，从 API 层面实现 React 的大部分功能，在这个过程中去探索为什么有虚拟 DOM、diff、为什么 setState 这样设计等问题。

提起 React，总是免不了和 Vue 做一番对比

<>Vue 的 API 设计非常简洁，但是其实现方式却让人感觉是“魔法”，开发者虽然能马上上手，但是为什么能实现功能却很难说清楚。

相比之下 React 的设计哲学非常简单，虽然经常有需要自己处理各种细节问题，但是却让人感觉它非常“真实”，能清楚地感觉到自己仍然是在写 js。

关于 jsx

在开始之前，我们有必要搞清楚一些概念。

我们来看一下这样一段代码：

const title = <h1 className="title">Hello, world!</h1>; 

这段代码并不是合法的 js 代码，它是一种被称为 jsx 的语法扩展，通过它我们就可以很方便的在 js 代码中书写 html 片段。

本质上，jsx 是语法糖，上面这段代码会被 babel 转换成如下代码

const title = React.createElement( 'h1', { className: 'title' }, 'Hello, world!' ); 

你可以在 babel 官网提供的在线转译测试 jsx 转换后的代码，这里有一个稍微复杂一点的例子

准备工作

为了集中精力编写逻辑，在代码打包工具上选择了最近火热的零配置打包工具 parcel，需要先安装 parcel：

npm install -g parcel-bundler 

接下来新建index.js和index.html，在index.html中引入index.js。

当然，有一个更简单的方法，你可以直接下载这个仓库的代码：

https://github.com/hujiulong/simple-react/tree/chapter-1

注意一下 babel 的配置 .babelrc

{ "presets": ["env"], "plugins": [ ["transform-react-jsx", { "pragma": "React.createElement" }] ] } 

这个transform-react-jsx就是将 jsx 转换成 js 的 babel 插件，它有一个pragma项，可以定义 jsx 转换方法的名称，你也可以将它改成h（这是很多类 React 框架使用的名称）或别的。

准备工作完成后，我们可以用命令parcel index.html将它跑起来了，当然，现在它还什么都没有。

React.createElement 和虚拟 DOM

前文提到，jsx 片段会被转译成用React.createElement方法包裹的代码。所以第一步，我们来实现这个React.createElement方法

从 jsx 转译结果来看，createElement 方法的参数是这样：

createElement( tag, attrs, child1, child2, child3 ); 

第一个参数是 DOM 节点的标签名，它的值可能是div，h1，span等等 第二个参数是一个对象，里面包含了所有的属性，可能包含了className，id等等 从第三个参数开始，就是它的子节点

我们对 createElement 的实现非常简单，只需要返回一个对象来保存它的信息就行了。

function createElement( tag, attrs, ...children ) { return { tag, attrs, children } } 

函数的参数...children使用了 ES6 的rest 参数，它的作用是将后面 child1,child2 等参数合并成一个数组 children。

现在我们来试试调用它

// 将上文定义的 createElement 方法放到对象 React 中 const React = { createElement } const element = ( <div> hello<span>world!</span> </div> ); console.log( element ); 

打开调试工具，我们可以看到输出的对象和我们预想的一致

我们的 createElement 方法返回的对象记录了这个 DOM 节点所有的信息，换言之，通过它我们就可以生成真正的 DOM，这个记录信息的对象我们称之为虚拟 DOM。

ReactDOM.render

接下来是 ReactDOM.render 方法，我们再来看这段代码

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); 

经过转换，这段代码变成了这样

ReactDOM.render( React.createElement( 'h1', null, 'Hello, world!' ), document.getElementById('root') ); 

所以render的第一个参数实际上接受的是 createElement 返回的对象，也就是虚拟 DOM 而第二个参数则是挂载的目标 DOM

总而言之，render 方法的作用就是将虚拟 DOM 渲染成真实的 DOM，下面是它的实现：

function render( vnode, container ) { // 当 vnode 为字符串时，渲染结果是一段文本 if ( typeof vnode === 'string' ) { const textNode = document.createTextNode( vnode ); return container.appendChild( textNode ); } const dom = document.createElement( vnode.tag ); if ( vnode.attrs ) { Object.keys( vnode.attrs ).forEach( key => { if ( key === 'className' ) key = 'class'; // 当属性名为 className 时，改回 class dom.setAttribute( key, vnode.attrs[ key ] ) } ); } vnode.children.forEach( child => render( child, dom ) ); // 递归渲染子节点 return container.appendChild( dom ); // 将渲染结果挂载到真正的 DOM 上 } 

这里注意 React 为了避免类名class和 js 关键字class冲突，将类名改成了 className，在渲染成真实 DOM 时，需要将其改回。

这里其实还有个小问题：当多次调用render函数时，不会清除原来的内容。所以我们将其附加到 ReactDOM 对象上时，先清除一下挂载目标 DOM 的内容：

const ReactDOM = { render: ( vnode, container ) => { container.innerHTML = ''; return render( vnode, container ); } } 

渲染和更新

到这里我们已经实现了 React 最为基础的功能，可以用它来做一些事了。

我们先在 index.html 中添加一个根节点

<div id="root"></div> 

我们先来试试官方文档中的Hello,World

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); 

可以看到结果：

试试渲染一段动态的代码，这个例子也来自官方文档

function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById( 'root' ) ); } setInterval( tick, 1000 ); 

可以看到结果：

后话

这篇文章中，我们实现了 React 非常基础的功能，也了解了 jsx 和虚拟 DOM，下一篇文章我们将实现非常重要的组件功能。

最后留下一个小问题 在定义 React 组件或者书写 React 相关代码，不管代码中有没有用到 React 这个对象，我们都必须将其 import 进来，这是为什么？

例如：

import React from 'react'; // 下面的代码没有用到 React 对象，为什么也要将其 import 进来 import ReactDOM from 'react-dom'; ReactDOM.render( <App />, document.getElementById( 'editor' ) ); 

不知道答案的同学再仔细看看这篇文章哦

从零开始实现 React 系列

React 是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读 React：从零开始实现一个 React，从 API 层面实现 React 的大部分功能，在这个过程中去探索为什么有虚拟 DOM、diff、为什么 setState 这样设计等问题。

整个系列大概会有六篇左右，我每周会更新一到两篇，我会第一时间在 github 上更新，有问题需要探讨也请在 github 上回复我~

博客地址: https://github.com/hujiulong/blog 关注点 star，订阅点 watch