这个系列的目的是通过使用 JS 实现“乞丐版”的 React,让读者了解 React 的基本工作原理,体会 React 带来的构建应用的优势

1 HTML 构建静态页面

使用 HTML 和 CSS,我们很容易可以构建出上图中的页面

<!DOCTYPE html>
<html lang="en">
<head>
<title>Build my react</title>
<style>
div {
text-align: center;
}
.father {
display: flex;
flex-direction: column;
justify-content: center;
height: 500px;
background-color: #282c34;
font-size: 30px;
font-weight: 700;
color: #61dafb;
}
.child {
color: #fff;
font-size: 16px;
font-weight: 200;
}
</style>
</head>
<body>
<div class="father">
Fucking React
<div class="child">用于构建用户界面的 JavaScript 库</div>
</div>
</body>
</html>

当然这只是一个静态的页面,我们知道,网站中最重要的活动之一是和用户产生交互,用户通过触发事件来让网页产生变化,这时就需要用到 JS

2 DOM 构建页面

使用 DOM 操作,我们也可以构建上面的静态页面,并且可以动态地改变页面、添加事件监听等来让网页活动变得更加丰富

我们先改写一下 HTML 的 body(如果没有特殊说明,本文不会更改 CSS 的内容),我们将 body 中的内容都去掉,新增一个 id 为 root 都 div 标签,并且引入index.js

 <div id="root"></div>
<script src="./index.js"></script>

index.js内容如下:

const text = document.createTextNode("Fucking React");

const childText = document.createTextNode("用于构建用户界面的 JavaScript 库");
const child = document.createElement("div");
child.className = "child";
child.appendChild(childText); const father = document.createElement("div");
father.className = "father";
father.appendChild(text);
father.appendChild(child); const container = document.getElementById("root");
container.appendChild(father);

使用 DOM 操作,我们也可以构建出同样的页面内容,但是缺点很明显

<div class="father">
Fucking React
<div class="child">用于构建用户界面的 JavaScript 库</div>
</div>

原本只要寥寥几行 HTML 的页面。使用 DOM 之后,为了描述元素的嵌套关系、属性、内容等,代码量骤增,并且可读性非常差。这就是命令式编程,我们需要一步一步地指挥计算机去做事

这还只是一个简单的静态页面,没有任何交互,试想一下,如果一个非常复杂的网页都是用 DOM 来构建,不好意思,我不想努力了~

3 从命令式到声明式

观察上述 index.js,我们不难发现,在创建每个节点的时候其实可以抽象出一组重复操作:

  1. 根据类型创建元素
  2. 添加元素属性(如 className)
  3. 逐一添加子元素

对于元素的嵌套关系和自身属性,我们可以利用对象来描述

const appElement = {
type: "div",
props: {
className: "father",
children: [
{
type: "TEXT",
props: {
nodeValue: "Fucking React",
children: [],
},
},
{
type: "div",
props: {
className: "child",
children: [
{
type: "TEXT",
props: {
nodeValue: "用于构建用户界面的 JavaScript 库",
children: [],
},
},
],
},
},
],
},
};

其中,type表示元素类型,特殊地,对于字符串文本,我们用TEXT表示;props对象用来描述元素自身的属性,比如 CSS 类名、children 子元素、nodeValue

我们将页面中的元素用 JS 对象来描述,天然地形成了一种树状结构,接着利用递归遍历对象就可以将重复的 DOM 操作去除,我们构建如下 render 函数来将上述 JS 对象渲染到页面上:

const render = (element, container) => {
const dom =
element.type == "TEXT"
? document.createTextNode("")
: document.createElement(element.type); Object.keys(element.props)
.filter((key) => key !== "children")
.forEach((prop) => (dom[prop] = element.props[prop])); element.props.children.forEach((child) => render(child, dom)); container.appendChild(dom);
};

调用 render 函数:

render(appElement, document.getElementById("root"));

现在我们只需要将我们想要的页面结构通过 JS 对象描述出来,然后调用 render 函数,JS 就会帮我们将页面渲染出来,而无需一步步地书写每一步操作

这就是声明式编程,我们需要做的是描述目标的性质,让计算机明白目标,而非流程。

对比命令式和声明式编程,体会两者的区别

4 JSX

对比 JS 对象和 HTML,JS 对象的可读性还是不行,所以 React 引入了 JSX 这种 JavaScript 的语法扩展

我们的 appElement 变成了这样:

// jsx
const appElement = (
<div className="father">
Fucking React
<div className="child">"用于构建用户界面的 JavaScript 库"</div>
</div>
);

现在描述元素是不是变得超级爽!

然而这玩意儿 JS 并不认识,所以我们还得把这玩意儿解析成 JS 能认识的语法,解析不是本文的重点,所以我们借助于 babel 来进行转换,我们在浏览器中引入 babel

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

并将包含jsxscripttype改为type/babel

<script type="text/babel">
const appElement = (
<div className="father">
Fucking React
<div className="child">"用于构建用户界面的 JavaScript 库"</div>
</div>
);
</script>

默认情况下,babel 解析 jsx 时会调用React.createElement来创建 React 元素

我们可以自定义创建元素的方法,我们这里的元素就是我们自定义的对象,见 appElement。通过添加注解即可指定创建元素的方法,此处指定 createElement

const createElement = (type, props, ...children) => {
console.log(type);
console.log(props);
console.log(children);
}; /** @jsx createElement */
const appElement = (
<div className="father">
Fucking React
<div className="child">"用于构建用户界面的 JavaScript 库"</div>
</div>
);

现在 babel 进行转换的时候会调用我们自定义的 createElement 函数,该函数接受的参数分别为:元素类型type、元素属性对象props、以及剩余参数children即元素的子元素

现在我们要做的是通过这几个参数来创建我们需要的 js 对象,然后返回即可

const createElement = (type, props, ...children) => {
return {
type,
props: {
...props,
children,
},
};
}; /** @jsx createElement */
const appElement = (
<div className="father">
Fucking React
<div className="child">用于构建用户界面的 JavaScript 库</div>
</div>
); console.log(appElement);

打印一下转换后的 appElement:

{
type: "div",
props: {
className: "father",
children: [
"Fucking React",
{
type: "div",
props: {
className: "child",
children: ["用于构建用户界面的 JavaScript 库"],
},
},
],
},
};

对比一下我们需要的结构,稍微有点问题,如果节点是字符串,我们需要转换成这种结构:

{
type: "TEXT",
props: {
nodeValue: "Fucking React",
children: [],
},
},

改进一下createElement

const createElement = (type, props, ...children) => {
return {
type,
props: {
...props,
children: children.map((child) =>
typeof child === "string"
? {
type: "TEXT",
props: {
nodeValue: child,
children: [],
},
}
: child
),
},
};
};

现在我们可以在代码中使用 jsx 而不用再写对象了,babel 会帮我们把 jsx 转换成对应的对象结构,然后调用 render 方法即可渲染到页面上

5 总结

至此,我们完成了从命令式编程到声明式编程的转变,我们已经完成了“乞丐版 React”的功能有:

  1. createElement创建元素
  2. render渲染元素到页面
  3. 支持jsx

接下来我们会从不同方向继续完善我们的“洪七公”,敬请期待!

6 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Build my react</title>
<style>
div {
text-align: center;
}
.father {
display: flex;
flex-direction: column;
justify-content: center;
height: 500px;
background-color: #282c34;
font-size: 30px;
font-weight: 700;
color: #61dafb;
}
.child {
color: #fff;
font-size: 16px;
font-weight: 200;
}
</style> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
// index.js
const createElement = (type, props, ...children) => {
return {
type,
props: {
...props,
children: children.map((child) =>
typeof child === "string"
? {
type: "TEXT",
props: {
nodeValue: child,
children: [],
},
}
: child
),
},
};
}; /** @jsx createElement */
const appElement = (
<div className="father">
Fucking React
<div className="child">用于构建用户界面的 JavaScript 库</div>
</div>
); const render = (element, container) => {
const dom =
element.type == "TEXT"
? document.createTextNode("")
: document.createElement(element.type); Object.keys(element.props)
.filter((key) => key !== "children")
.forEach((prop) => (dom[prop] = element.props[prop])); element.props.children.forEach((child) => render(child, dom)); container.appendChild(dom);
}; render(appElement, document.getElementById("root"));

从零打造“乞丐版” React(一)——从命令式编程到声明式编程的更多相关文章

  1. Facebook 开源安卓版 React Native,开发者可将相同代码用于网页和 iOS 应用开发

    转自:http://mt.sohu.com/20150915/n421177212.shtml Facebook 创建了React Java 库,这样,Facebook 的工程团队就可以用相同的代码给 ...

  2. 打造MacOS版“XShell”

    1.背景 XShell作为一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.作为server端开发,几乎是必备工具了. 很多刚 ...

  3. 乞丐版JAVA扫雷

    事先声明:本人是一位刚接触Java不久的菜鸟,所以代码写的略显臃肿,敬请谅解!这个扫雷是我在暑假时做的,灵感来源于csdn上某位大神的博客,不过我个人实在不喜欢他的代码实现,于是我自己写了一个实现上不 ...

  4. 200行代码实现简版react🔥

    200行代码实现简版react

  5. 从零打造在线网盘系统之Struts2框架起步

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  6. 从零打造在线网盘系统之Struts2框架配置全解析

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  7. 从零打造在线网盘系统之Struts2框架核心功能全解析

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  8. 从零打造在线网盘系统之Hibernate框架起步

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  9. 从零打造在线网盘系统之Hibernate配置O/R映射

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

随机推荐

  1. 业务可视化-让你的流程图"Run"起来

    前言 最近在研究业务可视化的问题,在日常的工作中,流程图和代码往往是分开管理的. 一个被维护多次的系统,到最后流程图和代码是否匹配这个都很难说. 于是一直有一个想法,让程序直接读流程图,根据流程图的配 ...

  2. windows版anaconda+CUDA9.0+cudnn7+pytorch+tensorflow安装

    1.Anaconda 首先下载Anaconda,它是一个开源的python发行版本,含有众多科学工具包,直接安装anaconda免除了许多包的手动安装,点击这里下载. 按照你的实际情况选择下载.下载完 ...

  3. intellidea 快捷键-*01

    快捷键: 0.竖向选择文本: alt+shift+insert:https://www.cnblogs.com/JonaLin/p/11422110.html 如果想修改快捷键(setting-> ...

  4. MyBatis-Plus联表查询的短板,终于有一款工具补齐了

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. mybatis-plus作为mybatis的增强工具,它的出现极大的简化了开发中的数据库操作,但是长久以来,它的 ...

  5. 丽泽普及2022交流赛day16 社论

    这场比较平凡吧 . 省流: http://zhengruioi.com/contest/1087 目录 目录 A. Gene 题面 题解 算法一(正解) 算法二 B. Fight 题面 题解 算法一( ...

  6. mysql 之full join

    首先,mysql中是不支持full join的,如果要实现类似的功能可以用union all,union会剔除重复.以下是实现实例 create table if not exists t1(`id` ...

  7. 【点击云游台湾省】今天,老子云在台湾省建了个3D房子!

    今日热搜仍然聚焦台湾省,中国新闻网发文:地图已经可以显示台湾省的每个街道.网友一片叫好! 台湾省通过平面图观察,难免看的不够真切,其实现在已经可以通过3D视角云游台湾省了! 老子云这次通过自研技术,还 ...

  8. 深入理解Aarch64内存管理

    本文是对learn_the_architecture_-_aarch64_memory_management的部分翻译和个人注解.个人英文水平有限,若有翻译不当,欢迎加我私人微信LinuxDriver ...

  9. 成为 Apache 贡献者,So easy!

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  10. DBPack 限流熔断功能发布说明

    上周我们发布了 v0.4.0 版本,增加了限流熔断功能,现对这两个功能做如下说明. 限流 DBPack 限流熔断功能通过 filter 实现.要设置限流规则,首先要定义 RateLimitFilter ...