React 的诞生过程

字符拼接时代 - 2004

时间回到 2004 年，Mark Zuckerberg 当时还在宿舍捣鼓最初版的 Facebook 。

这一年，大家都在用 PHP 的字符串拼接（String Concatenation）功能来开发网站。

$str = '<ul>';

foreach ($talks as $talk) {
$str += '<li>' . $talk->name . '</li>';
}
$str += '</ul>';

这种网站开发方式在当时看来是非常正确的，因为不管是后端开发还是前端开发，甚至根本没有开发经验，都可以使用这种方式搭建一个大型网站。

唯一不足的是，这种开发方式容易造成 XSS 注入等安全问题。如果 $talk->name 中包含恶意代码，而又没有做任何防护措施的话，那么攻击者就可以注入任意 JS 代码。于是就催生了“永远不要相信用户的输入”的安全守则。

最简单的应对方法是对用户的任何输入都进行转义（Escape）。然而这也带来了其他麻烦，如果对字符串进行多次转义，那么反转义的次数也必须是相同的，否则会无法得到原内容。如果又不小心把 HTML 标签（Markup）给转义了，那么 HTML 标签会直接显示给用户，从而导致很差的用户体验。

XHP 时代 - 2010

到了 2010 年，为了更加高效的编码，同时也避免转义 HTML 标签的错误，Facebook 开发了 XHP 。XHP 是对 PHP 的语法拓展，它允许开发者直接在 PHP 中使用 HTML 标签，而不再使用字符串。

$content = <ul />;

foreach ($talks as $talk) {
$content->appendChild(<li>{$talk->name}</li>);
}

这样的话，所有的 HTML 标签都使用不同于 PHP 的语法，我们可以轻易的分辨哪些需要转义哪些不需要转义。

不久的后来，Facebook 的工程师又发现他们还可以创建自定义标签，而且通过组合自定义标签有助于构建大型应用。而这恰恰是 Semantic Web 和 Web Components 概念的一种实现方式。

$content = <talk:list />;

foreach ($talks as $talk) {
$content->appendChild(<talk talk={$talk} />);
}

之后，Facebook 在 JS 中尝试了更多的新技术方式以减小客户端和服务端之间的延时。比如跨浏览器 DOM 库和数据绑定，但是都不是很理想。

JSX - 2013

等到 2013 年，突然有一天，前端工程师 Jordan Walke 向他的经理提出了一个大胆的想法：把 XHP 的拓展功能迁移到 JS 中。最开始大家都以为他疯了，因为这与当时大家都看好的 JS 框架格格不入。不过他最终还是执着地说服了经理，允许他用 6 个月的时间来验证这个想法。这里不得不说 Facebook 良好的工程师管理哲学让人敬佩，值得借鉴。

要想把 XHP 的拓展功能迁移到 JS ，首要任务是需要一个拓展来让 JS 支持 XML 语法，该拓展称为 JSX 。当时，随着 Node.js 的兴起，Facebook 内部对于转换 JS 已经有相当多的工程实践了。所以实现 JSX 简直轻而易举，仅仅花费了大概一周的时间。

const content = ( <TalkList>
{ talks.map(talk => <Talk talk={talk} />)} </TalkList>);

原文：https://segmentfault.com/a/1190000013365426

作者：mingzhong

React 的诞生过程相关推荐

《HTML5+CSS3网页设计入门必读》——第1章　标记简史1.1　从IETF到W3C：HTML 4的诞生过程...
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.1节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
面试官:说说react的渲染过程
面试官:说说react的渲染过程 hello,这里是潇晨,大家在面试的过程中有没有遇到过一些和react相关的问题呢,比如面试官让你说说react渲染的过程,这到题目比较开放,也比较考验大家对reac ...
一个产品的诞生过程全程记录（二）
一个产品的诞生过程全程记录(二) 今天开始做电气部分,目前电气部分的架构为 1.三路无刷直流驱动 2.做姿态PID算法用的MCU 3.保护与电源管理电路 4.FPGA驱动电路三路无刷驱动部分打算选用 ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
记录一次react项目配置过程
1.为什么要配置react而不是脚手架因为要知其然,最好还要知其所以然! 2.配置对象 webpack webpack-dev-server babel eslint 3.配置过程 1.webpac ...
博客诞生过程与变革：十年来谁是写博客第一人?
北京时间3月21日,国外媒体有文章称,假如没有一亿人每天热衷于写Blog,那么Blog可能不会成为目前互联网上最主要的应用之一.于是,不止一个人声称自己是第一个写Blog的人.到底谁才是第一个真正写B ...
记一次node+react项目发布过程(一)--webpack生产环境打包优化
先附上项目效果: 项目地址: http://47.105.144.204/index github: github.com/dsying/reac- 未优化之前 webpack配置文件 const p ...
vcs中一个simv的诞生过程
叨叨 1.本来有打算写一篇长文来介绍的,但是无奈自身水平不足,再加上实在懒得写那么多字,所以本文相当于是一个缩减版,意思到了就行. 2.发现做验证如果想继续深入,可以去补充下编译原理的相关知识. 正文 ...
产品诞生过程--导图

React 的诞生过程

React 的诞生过程相关推荐

最新文章

热门文章