React 的诞生过程

01

字符拼接时代 - 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 标签会直接显示给用户，从而导致很差的用户体验。

02

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 库和数据绑定，但是都不是很理想。

03

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