资讯专栏INFORMATION COLUMN

从零开始实现一个React(一):JSX和虚拟DOM

曹金海 / 821人阅读

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

前言

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

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

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

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

关于jsx

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

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

const title = 

Hello, world!

;

这段代码并不是合法的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.jsindex.html,在index.html中引入index.js

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

https://github.com/hujiulong/...

注意一下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节点的标签名,它的值可能是divh1span等等
第二个参数是一个对象,里面包含了所有的属性,可能包含了classNameid等等
从第三个参数开始,就是它的子节点

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

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

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

现在我们来试试调用它

// 将上文定义的createElement方法放到对象React中
const React = {
    createElement
}

const element = (
    
helloworld!
); console.log( element );

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

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

ReactDOM.render

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

ReactDOM.render(
    

Hello, world!

, 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中添加一个根节点

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

ReactDOM.render(
    

Hello, world!

, document.getElementById("root") );

可以看到结果:

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

function tick() {
    const element = (
        

Hello, world!

It is {new Date().toLocaleTimeString()}.

); 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( , document.getElementById( "editor" ) );

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

从零开始实现React系列

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93531.html

相关文章

  • 从零开始实现React(二):实现组件功能

    摘要:在这篇文章中,我们就要实现的组件功能。这篇文章的代码从零开始实现系列是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读从零开始实现一个,从层面实现的大部分功能,在这个过程中去探索为什么有虚拟为什么这样设计等问题。 前言 在上一篇文章JSX和虚拟DOM中,我们实现了基础的JSX渲染功能,但是React的意义在于组件化。在这篇文章中,我们就要实现React的组件功...

    vslam 评论0 收藏0
  • 从零自己编写React框架 【中高级前端杀手锏级别技能】

    摘要:想要自己实现一个简易版框架,并不是非常难。为了防止出现这种情况,我们需要改变整体的策略。上面这段话,说的就是版本和架构的区别。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己实现一个React简易版框架,并不是非常难。但是你需要先了解下面这些知识点如果你能阅读以下的文章,那么会更轻松的阅读本文章: 优化你的超大型React应用 ...

    hot_pot_Leo 评论0 收藏0
  • 从零自己编写React框架 【中高级前端杀手锏级别技能】

    摘要:想要自己实现一个简易版框架,并不是非常难。为了防止出现这种情况,我们需要改变整体的策略。上面这段话,说的就是版本和架构的区别。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己实现一个React简易版框架,并不是非常难。但是你需要先了解下面这些知识点如果你能阅读以下的文章,那么会更轻松的阅读本文章: 优化你的超大型React应用 ...

    codecook 评论0 收藏0
  • Luy 1.0 :React-like轮子的诞生

    摘要:司徒正美的一款了不起的化方案,支持到。行代码内实现一个胡子大哈实现的作品其实就是的了源码学习个人文章源码学习个人文章源码学习个人文章源码学习个人文章这几片文章的作者都是司徒正美,全面的解析和官方的对比。 前言 在过去的一个多月中,为了能够更深入的学习,使用React,了解React内部算法,数据结构,我自己,从零开始写了一个玩具框架。 截止今日,终于可以发布第一个版本,因为就在昨天,我...

    codecook 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<