90行JS代码构建属于你的React

Posted 知网乎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了90行JS代码构建属于你的React相关的知识,希望对你有一定的参考价值。


当我学习 React 的时候,我觉得它所做的一切都是魔术,然后我就开始思考这种魔术究竟是什么。我感到非常惊讶,当我发现 React 所做的一切非常简单,甚至如果我们不是下一家大型初创公司增加筹码,仅需要很少的JS代码就可以构建它。这也是促使我写这篇文章的动力,希望你读完这篇文章也有相同的感觉。

我们将构建什么功能?

 JSX

函数组件

 类组件

生命周期钩子函数

我们不会构建什么?

虚拟DOM

再次为了简单起见,我们不会在本文中实现我们自己的虚拟DOM,我们将使用 snabbdom ,有趣的是,Vue.js 虚拟DOM借鉴了它,你可以在这里读更多关于 snabbdom 的内容: https://github.com/snabbdom/s...

React Hooks

有些人可能对此感动失望,但是,一口吃不成一个胖子,我们需要一步一步来,因此让我们首先构建基本的东西,然后再在此基础上加以补充。我计划后续文章中在我们此次构建的内容之上,编写我们自己的 React Hooks 以及虚拟DOM,

可调试性

这是增加任何库或框架的复杂度的关键部分之一,由于我们只是出于娱乐目的而做,因此我们可以放心地忽略 React 提供的可调试性功能,例如 dev tools 和分析器。

性能和兼容性

让我们开始动手

在开始之前,我们需要一个支持ES6,自动热更新的脚手架。我已经创建了一个非常基础的 webpack 脚手架,你可以进行克隆和设置: https://github.com/ameertheha...

90行JS代码构建属于你的React

JSX

JSX 是一个开放标准,不仅限于 React,我们可以在没有 React 的情况下使用它,它比你想象得还有容易。想要了解如何让我们的库支持 JSX ,我们首先需要看看在我们使用 JSX 时背后究竟发生了什么。

 
   
   
 
  1. const App = (  

  2.     <div>  

  3.         <h1 className="primary">QndReact is Quick and dirty react</h1>  

  4.         <p>It is about building your own React in 90 lines of JavsScript</p>  

  5.     </div>  

  6. );  

  7. // 上面的 jsx 被转换成下面这样:  

  8. /**  

  9.  * React.createElement(type, attributes, children)  

  10.  */  

  11. var App = React.createElement(  

  12.     "div",  

  13.     null,  

  14.     React.createElement(  

  15.         "h1",  

  16.         {  

  17.             className: "primary"  

  18.         },  

  19.         "QndReact is Quick and dirty react"  

  20.     ),  

  21.     React.createElement(  

  22.         "p",  

  23.         null,  

  24.         "It is about building your own React in 90 lines of JavsScript"  

  25.     )  

  26. ); 

正如你看到的,每个 JSX 元素都通过 @babel/plugin-transform-react-jsx 插件转换为了 React.createElement(...) 函数调用的形式,你可以在这里使用 JSX 进行更多的转换

为了使上述转换运行正常,在编写 JSX 时,你需要引入 React,你就是为什么当你不引入 React 时,编写 JSX 会出现错误的原因。@babel/plugin-transform-react-jsx 插件已经添加在了我们的项目依赖中,下面我们先安装一下依赖

 
   
   
 
  1. npm install 

把项目的配置增加到 .babelrc 文件中:

 
   
   
 
  1.  

  2.     "plugins": [  

  3.         [  

  4.             "@babel/plugin-transform-react-jsx",  

  5.             {  

  6.                 "pragma": "QndReact.createElement", // default pragma is React.createElement  

  7.                 "throwIfNamespace": false // defaults to true  

  8.             }  

  9.         ]  

  10.     ]  

此后,只要 Babel 看到 JSX ,它就会调用 QntReact.createElement(...),但是我们还未定义此函数,现在我们将其写到 src/qnd-react.js 中。

 
   
   
 
  1. const createElement = (type, props = {}, ...children) => {  

  2.     console.log(type, props, children);  

  3. };  

  4. // 像 React.createElement 一样导出  

  5. const QndReact = {  

  6.     createElement  

  7. };  

  8. export default QndReact; 

我们在控制台打印出了传递给我们的 type 、 props、 children。为了测试我们的转换是否正常,我们可以在 src/index.js 中编写一些 JSX 。

 
   
   
 
  1. // QndReact 需要被引入  

  2. import QndReact from "./qnd-react";  

  3. const App = (  

  4.     <div>  

  5.         <h1 className="primary">  

  6.             QndReact is Quick and dirty react  

  7.         </h1>  

  8.         <p>It is about building your own React in 90 lines of JavsScript</p>  

  9.     </div>  

  10. ); 

启动项目: npm start,在浏览器输入localhost:3000,现在你的控制台看起来应该与下图类似:

90行JS代码构建属于你的React

根据以上信息,我们可以使用 snabbdom 创建我们内部的 虚拟DOM节点 ,然后我们才能将其用于我们的协调(reconciliation) 过程,可以使用如下的命令安装 snabbdom:

 
   
   
 
  1. npm install snabbdom 

当 QndReact.createElement(...) 被调用时吗,创建和返回 虚拟DOM节点。

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     return h(type, { props }, children);  

  5. };  

  6. const QndReact = {  

  7.     createElement  

  8. };  

  9. export default QndReact; 

很好,现在我们可以解析 JSX 并创建自己的虚拟DOM节点,但是仍然无法在浏览器中呈现出来。为此,我们在 src/qnd-react-dom.js 添加一个 render 方法。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. //React.render(<App />, document.getElementById('root'));  

  3. const render = (el, rootElement) => {  

  4.     //将el渲染到rootElement的逻辑  

  5.  

  6. const QndReactDom = {  

  7.     render  

与其我们自己去处理将元素放到 DOM 上的繁重工作,不如让 snabbdom 去处理。为此我们可以引入模块去初始化 snabbdom。snabbdom 中的模块可以看做是插件,可以支持 snabbdom 做更多的事。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. import * as snabbdom from 'snabbdom';  

  3. import propsModule from 'snabbdom/modules/props';  

  4. const reconcile = snabbdom.init([propsModule]);  

  5. const render = (el, rootDomElement) => {  

  6.     //将el渲染到rootElement  

  7.     reconcile(rootDomElement, el);  

  8.  

  9. const QndReactDom = {  

  10.     render  

  11.  

  12. export default QndReactDom; 

我们使用这个新的 render 函数去 src/index 中去做一些魔法。

 
   
   
 
  1. //src/index.js  

  2. import QndReact from "./qnd-react";  

  3. import QndReactDom from './qnd-react-dom';  

  4. const App = (  

  5.     <div>  

  6.         <h1 className="primary">  

  7.             QndReact is Quick and dirty react  

  8.         </h1>  

  9.         <p>It is about building your own React in 90 lines of JavsScript</p>  

  10.     </div>  

  11. );  

  12. QndReactDom.render(App, document.getElementById('root')); 

瞧,我们的JSX已经可以渲染到屏幕上了。

90行JS代码构建属于你的React

等下,这个有一个小问题,当我们两次调用 render 时,我们会在控制台看到一些奇怪的错误(译者注: 可以在 index.js 中多次调用 render,查看控制台错误),背后的原因是我们只有在第一次渲染时,可以在真实的DOM节点上调用 reconcile 方法,然后,我们应该在之前返回的虚拟DOM节点上调用。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. import * as snabbdom from 'snabbdom';  

  3. import propsModule from 'snabbdom/modules/props';  

  4. const reconcile = snabbdom.init([propsModule]);  

  5. let rootVNode;  

  6. //QndReactDom.render(App, document.getElementById('root'))  

  7. const render = (el, rootDomElement) => {  

  8.     if(rootVNode == null) {  

  9.         //第一次调用 render 时  

  10.         rootVNode = rootDomElement 

  11.     }  

  12.     rootVNode = reconcile(rootVNode, el);  

  13.  

  14. const QndReactDom = {  

  15.     render  

  16.  

  17. export default QndReactDom; 

很开心,我们的应用程序中有一个能正常工作的 JSX 渲染,现在让我们开始渲染一个函数组件,而不仅仅是一些普通的 html

让我们向 src/index.js 添加一个 Greeting 函数组件,如下所示:

 
   
   
 
  1. //src/index.js  

  2. import QndReact from "./qnd-react";  

  3. import QndReactDom from './qnd-react-dom';  

  4. const Greeting = ({ name }) => <p>Welcome {name}!</p> 

  5. const App = (  

  6.     <div>  

  7.         <h1 className="primary">  

  8.             QndReact is Quick and dirty react  

  9.         </h1>  

  10.         <p>It is about building your own React in 90 lines of JavsScript</p>  

  11.         <Greeting name={"Ameer Jhan"} />  

  12.     </div>  

  13. );  

  14. QndReactDom.render(App, document.getElementById('root')); 

此时,在控制台会出现以下错误:

90行JS代码构建属于你的React

我们可以在 QndReact.createElement(...) 方法中打印出数据看一下原因。

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     console.log(type, props, children);  

  5.     return h(type, { props }, children);  

  6. };  

  7. ... 

90行JS代码构建属于你的React

如果可以看到,函数组件传递过来的 type 是一个JS函数。如果我们调用这个函数,就能获得组件希望渲染的 HTML 结果。

我们根据 type 参数的类型,如果是函数类型,我们就调用这个函数,并将 props 作为参数传给它,如果不是函数类型,我们就当作普通的 HTML 元素处理。

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     //如果是函数组件,那么调用它,并返回执行结果  

  5.     if (typeof (type) == 'function') {  

  6.         return type(props);  

  7.     }  

  8.     return h(type, { props }, children);  

  9. };  

  10. const QndReact = {  

  11.     createElement  

  12. };  

  13. export default QndReact; 

欢呼!我们的函数组件已经可以正常工作了。

90行JS代码构建属于你的React

我们已经完成了很多,让我们深吸一口气,喝杯咖啡,因为我们已经差不多实现了 React,不过我们还需要攻克类组件。

我们首先在 src/qnd-react.js 中创建 Component 基类:

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     //如果是函数组件,那么调用它,并返回执行结果  

  5.     if (typeof (type) == 'function') {  

  6.         return type(props);  

  7.     }  

  8.     return h(type, { props }, children);  

  9. };  

  10. class Component {  

  11.     constructor() { }  

  12.     componentDidMount() { }  

  13.     setState(partialState) { }  

  14.     render() { }  

  15.  

  16. const QndReact = {  

  17.     createElement,  

  18.     Component  

  19. };  

  20. export default QndReact; 

现在我们在 src/counter.js 中编写我们的第一个 Counter 类组件:

 
   
   
 
  1. //src/counter.js  

  2. import QndReact from './qnd-react';  

  3. export default class Counter extends QndReact.Component {  

  4.     constructor(props) {  

  5.         super(props);  

  6.         this.state = {  

  7.             count: 0  

  8.         }  

  9.     }  

  10.     componentDidMount() {  

  11.         console.log('Component mounted');  

  12.     }  

  13.     render() {  

  14.         return <p>Count: {this.state.count}</p>  

  15.     }  

是的,我知道我们尚未在计数器中实现任何逻辑,但是别担心,一旦我们的状态管理系统运行正常,我们就会添加这些内容。现在,让我们尝试在 src/index.js 中渲染它。

 
   
   
 
  1. //src/index.js  

  2. import QndReact from "./qnd-react";  

  3. import QndReactDom from './qnd-react-dom';  

  4. import Counter from "./counter";  

  5. const Greeting = ({ name }) => <p>Welcome {name}!</p> 

  6. const App = (  

  7.     <div>  

  8.         <h1 className="primary">  

  9.             QndReact is Quick and dirty react  

  10.         </h1>  

  11.         <p>It is about building your own React in 90 lines of JavsScript</p>  

  12.         <Greeting name={"Ameer Jhan"} />  

  13.         <Counter />  

  14.     </div>  

  15. );  

  16. QndReactDom.render(App, document.getElementById('root')); 

和料想中的一样,又又又报错了。

90行JS代码构建属于你的React

上面的错误看起来是不是很熟悉,当你尝试使用类组件而不集成自 React.Component 时,可能遇到过以上错误。要知道为什么会这样,我们可以在 React.createElement(...) 中添加一个 console.log,如下所示:

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     console.log(typeof (type), type);  

  5.     //如果是函数组件,那么调用它,并返回执行结果  

  6.     if (typeof (type) == 'function') {  

  7.         return type(props);  

  8.     }  

  9.     return h(type, { props }, children);  

  10. }; 

我们来看看控制台打印了什么内容。

90行JS代码构建属于你的React

你可以看出 Counter 的 type 类型也是函数,这是因为 Babel 会将 ES6 类转换为普通的 JS 函数,那么我们该如何类组件的情况呢。其实,我们可以在我们的 Component 基类中添加一个静态属性,这样我们利用该属性去检查 type 参数是否是一个类。React 中也是相同的处理逻辑,你可以阅读 Dan的博客

 
   
   
 
  1. //src/qnt-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     console.log(typeof (type), type);  

  5.     //如果是函数组件,那么调用它,并返回执行结果  

  6.     if (typeof (type) == 'function') {  

  7.         return type(props);  

  8.     }  

  9.     return h(type, { props }, children);  

  10. }; 

  11. class Component {  

  12.     constructor() { }  

  13.     componentDidMount() { }  

  14.     setState(partialState) { }  

  15.     render() { }  

  16.  

  17. //给 Component 组件添加静态属性来区分是函数还是类   

  18. Component.prototype.isQndReactClassComponent = true 

  19. const QndReact = {  

  20.     createElement,  

  21.     Component  

  22. };  

  23. export default QndReact; 

现在,我们在 QndReact.createElement(...) 中增加一些代码来处理类组件。

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     console.log(type.prototype);  

  5.     /**  

  6.      * 如果是类组件  

  7.      * 1.创建一个实例  

  8.      * 2.调用实例的 render 方法  

  9.      */  

  10.     if (type.prototype && type.prototype.isQndReactClassComponent) {  

  11.         const componentInstance = new type(props);  

  12.         return componentInstance.render();  

  13.     }  

  14.     //如果是函数组件,那么调用它,并返回执行结果  

  15.     if (typeof (type) == 'function') {  

  16.         return type(props);  

  17.     }  

  18.     return h(type, { props }, children);  

  19. };  

  20. class Component {  

  21.     constructor() { }  

  22.     componentDidMount() { }  

  23.     setState(partialState) { }  

  24.     render() { }  

  25.  

  26. //给 Component 组件添加静态属性来区分是函数还是类   

  27. Component.prototype.isQndReactClassComponent = true 

  28. const QndReact = {  

  29.     createElement,  

  30.     Component  

  31. };  

  32. export default QndReact; 

现在,我们的类组件已经能够渲染到浏览器上了:

90行JS代码构建属于你的React

我们向类组件中增加 state,在此之前,我们需要知道,每次调用 this.setState({}) 时,如何更新 DOM 的责任是 react-dom 包,而不是 React 的责任。这是为了使 React 的核心部分,例如Component 类与平台分离,从而提升代码的可重用性。即在 ReactNative 中,你也可以使用同样的 Component 类,react-native 负责如何更新UI。你可能会问自己:当调用 this.setState(...) 时,React 如何知道该怎么做,答案就是 react-dom 通过在 React 上设置了一个 __updater 属性与 React 进行通信。Dan 对此也有出色的文章,你可以点击阅读。现在让我们在 QndReactDom 中为 QndReact 添加 __updater 属性。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. import QndReact from './qnd-react';  

  3. import * as snabbdom from 'snabbdom';  

  4. import propsModule from 'snabbdom/modules/props';  

  5. ...  

  6. //QndReactDom 告诉 QndReact 如何更新 DOM  

  7. QndReact.__updater = () => {  

  8.     //当调用 this.setState 的时候更新 DOM 逻辑  

无论何时我们调用 this.setState({...}),我们都需要比较组件的 oldVNode 和在组件上调用了 render 方法之后生成的 newVNode。为了进行比较,我们在类组件上添加 __vNode 属性,以维护该组件当前的 VNode 实例。

 
   
   
 
  1. //src/qnd-react.js  

  2. ...  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     /**  

  5.      * 如果是类组件  

  6.      * 1.创建一个实例  

  7.      * 2.调用实例的 render 方法  

  8.      */  

  9.     if (type.prototype && type.prototype.isQndReactClassComponent) {  

  10.         const componentInstance = new type(props);  

  11.         componentInstancecomponentInstance.__vNode = componentInstance.render();  

  12.         return componentInstance.__vNode;  

  13.     }  

  14.     //如果是函数组件,那么调用它,并返回执行结果  

  15.     if (typeof (type) == 'function') {  

  16.         return type(props);  

  17.     }  

  18.     return h(type, { props }, children);  

  19. };  

  20. ... 

现在我们来在 Component 的基类中实现 setState 方法。

 
   
   
 
  1. //src/qnd-react.js  

  2. ...  

  3. class Component {  

  4.     constructor() { }  

  5.     componentDidMount() { }  

  6.     setState(partialState) {   

  7.         this.state = {  

  8.             ...this.state,  

  9.             ...partialState  

  10.         }  

  11.         //调用 QndReactDom 提供的 __updater 方法  

  12.         QndReact.__updater(this);  

  13.     }  

  14.     render() { }  

  15.  

  16. ... 

处理 QndReactDom 中的 __updater 方法。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. ...  

  3. QndReact.__updater = (componentInstance) => {  

  4.     //当调用 this.setState 的时候更新 DOM 逻辑  

  5.     //获取在 __vNode 上存储的 oldVNode  

  6.     const oldVNode = componentInstance.__vNode;  

  7.     //获取 newVNode  

  8.     const newVNode = componentInstance.render();  

  9.     //更新 __vNode  

  10.     componentInstance.__vNode = reconcile(oldVNode, newVNode);  

  11.  

  12. ...  

  13. export default QndReactDom; 

OK,我们在 Counter 组件中增加 state 来检验我们的 setState 实现是否生效。

 
   
   
 
  1. //src/counter.js  

  2. import QndReact from './qnd-react';  

  3. export default class Counter extends QndReact.Component {  

  4.     constructor(props) {  

  5.         super(props);  

  6.         this.state = {  

  7.             count: 0  

  8.         }  

  9.         // update the count every second  

  10.         setInterval(() => {  

  11.             this.setState({  

  12.                 count: this.state.count + 1  

  13.             })  

  14.         }, 1000);  

  15.     }  

  16.     componentDidMount() {  

  17.         console.log('Component mounted');  

  18.     }  

  19.     render() {  

  20.         return <p>Count: {this.state.count}</p>  

  21.     }  

太棒啦,现在 Counter 组件运行情况与我们预期完全一致。

我们继续添加 componentDidMount 的生命周期钩子函数。Snabbdom 提供了一些钩子函数,通过他们,我们可以知道真实DOM上面是否有添加,删除或是更新了虚拟DOM节点,你可以在此处了解更多信息。

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     /**  

  5.      * 如果是类组件  

  6.      * 1.创建一个实例  

  7.      * 2.调用实例的 render 方法  

  8.      */  

  9.     if (type.prototype && type.prototype.isQndReactClassComponent) {  

  10.         const componentInstance = new type(props);  

  11.         componentInstancecomponentInstance.__vNode = componentInstance.render();  

  12.         return componentInstance.__vNode;  

  13.         //增加钩子函数(当虚拟DOM被添加到真实DOM节点上时)  

  14.         componentInstance.__vNode.data.hook = {  

  15.             create: () => {  

  16.                 componentInstance.componentDidMount()  

  17.             }  

  18.         }  

  19.     }  

  20.     //如果是函数组件,那么调用它,并返回执行结果  

  21.     if (typeof (type) == 'function') {  

  22.         return type(props);  

  23.     }  

  24.     return h(type, { props }, children);  

  25. };  

  26. ...  

  27. export default QndReact; 

至此,我们已经在类组件上支持了 componentDidMount 生命周期钩子函数。

结束之前,我们再添加下事件绑定的支持。为此,我们可以在 Counter 组件中增加一个按钮,点击的时候,计数器的数字增加。请注意,我们遵循的是基于常规的JS事件命名约定,而非基于 React,即双击事件使用 onDblClick,而非 onDoubleClick。

 
   
   
 
  1. import QndReact from './qnd-react';  

  2. export default class Counter extends QndReact.Component {  

  3.     constructor(props) {  

  4.         super(props);  

  5.         this.state = {  

  6.             count: 0  

  7.         }  

  8.     }  

  9.     componentDidMount() {  

  10.         console.log('Component mounted');  

  11.     }  

  12.     render() {  

  13.         return (  

  14.             <div>  

  15.                 <p>Count: {this.state.count}</p>  

  16.                 <button onClick={() => this.setState({  

  17.                     count: this.state.count + 1  

  18.                 })}>Increment</button>  

  19.             </div>  

  20.         )  

  21.     }  

上面的组件不会正常工作,因为我们没有告诉我们的 VDom 如何去处理它。首先,我们给 Snabdom 增加事件监听模块。

 
   
   
 
  1. //src/qnd-react-dom.js  

  2. import QndReact from './qnd-react';  

  3. import * as snabbdom from 'snabbdom';  

  4. import propsModule from 'snabbdom/modules/props';  

  5. import eventlistenersModule from 'snabbdom/modules/eventlisteners';  

  6. const reconcile = snabbdom.init([propsModule, eventlistenersModule]);  

  7. ... 

Snabdom 希望将文本属性和事件属性作为两个单独的对象,我们我们需要这样做:

 
   
   
 
  1. //src/qnd-react.js  

  2. import { h } from 'snabbdom';  

  3. const createElement = (type, props = {}, ...children) => {  

  4.     ...  

  5.     let dataProps = {};  

  6.     let eventProps = {};  

  7.     for (let propKey in props) {  

  8.         // event 属性总是以 `on` 开头  

  9.         if (propKey.startsWith('on')) {  

  10.             const event = propKey.substring(2).toLowerCase();  

  11.             eventProps[event] = props[propKey];  

  12.         } else {  

  13.             dataProps[propKey] = props[propKey];  

  14.         }  

  15.     }  

  16.     return h(type, { props: dataProps, on: eventProps }, children);  

  17. };  

  18. ... 

现在当我们点击 Counter 组件的按钮的时候,计数器加1。


原创:Win10系统之家


以上是关于90行JS代码构建属于你的React的主要内容,如果未能解决你的问题,请参考以下文章

react快速构建一个应用项目

推荐网言网语架构师:90行代码,搞定你的日志监控框架!

React 谁都会,你的优势在哪里?

更新不到90行代码,pygame从无到有教会你制作有趣的大小图全景效果,不看是你的损失!

更新不到90行代码,pygame从无到有教会你制作有趣的大小图全景效果,不看是你的损失!

js 常用代码片段