《 React：引领未来的用户界面开发框架》试读

爱被打了一巴掌 2022-04-12 09:58 155阅读 0赞

《 React：引领未来的用户界面开发框架》  试读

React是什么？

** React 仅仅是 VIEW 层。**

React 通常和其他的 JavaScript 框架同时被提及，但是说“React 对比 Angular”却讲不通，因为它们之间是不可比较的。Angular 是一个完整的框架（包括一个 view 层），React 却并不是。这也是 React 很难于理解的原因，它虽然抽离自一个具备完整框架的生态系统中，但仅仅是一个 view 层。

React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染。这就是 React 全部的输出——HTML。你把 HTML / JavaScript 合到一起，被称为“组件”，允许把它们自己内部的状态存到内存中（比如在一个选项卡中哪个被选中），不过最后你只是吐出 HTML。

**      很明显，你没办法单单使用 React 来创建一个功能完善的动态应用。**

** **

## 好处 ##

使用 React 一段时间后，我发现了三个非常重要的特性。

1. 通过查看一个源文件就可以知道你的组件将会如何渲染。

这是最大的好处，尽管这和 Angular 模板没什么不同。下面看一个真实的应用实例。

假设你需要在用户登录后更新站点头部的用户名。如果没有使用 JavaScript MVC 框架，可能要这么做：

<header>  
       <div class="name"></div>
    </header>

$.post('/login', credentials, function( user ) {
        // Modify the DOM here
        $('header .name').show().text( user.name );
    });

在 React 中你可以像下面这样做：

render: function() {  
        return <header>
            { this.state.name ? <div>this.state.name</div> : null }
        </header>;
    }

我们会清楚的分辨出这个组件可能会如何渲染。如果你知道这个语句，就会知道渲染后的输出。你没必要去记录程序的流程。在复杂应用中，特别是团队开发中，显得尤为重要。

2. 将 JavaScript 和 HTML 绑定到 JSX 使组件更易懂

上面的那种把 HTML 和 JavaScript 混合在一起的写法可能让你很不适应。我们会很自然地拒绝将 JavaScript 放在 DOM 当中（比如 onClick 事件处理函数）即便我们是小小的开发者。但是，请一定要相信我；JSX 组件真的会让你的工作变得很“nice”。

按照传统，你会把视图（HTML）从功能（JavaScript）中分离开出来。这会产生一个巨大的 JavaScript 文件，包含了一个“页面”的所有功能需求，并且你必须记录复杂的流程，从 JS 到 HTML 到 JS 到悲痛欲绝。

捆绑功能直接标记和打包成一个可移植的，自主控制的“组件”，让你更开心，且减少脏乱的代码。因为 JavaScript 与 HTML 关系密切，揉到一起也正常。

3. 你可以在服务端渲染 React

如果你正在创建一个门户网站或者应用，并且按照 render-it-all-on-the-client 路线，可能已经出错了。只通过客户端渲染使得 Soundcloud 感觉如此慢，相反Stack Overflow（纯服务端渲染）如此快。你可以在服务端渲染React，并且你该这么做。

## 坏处 ##

React 仅仅是个 view 层。

1. 下面这些都没有：

*  事件系统（除了原生的 DOM 事件）
 *  AJAX 功能
 *  数据层
 *  Promises
 *  应用程序架构
 *  实现以上功能的规范

单独的 React 在这个世界上真的没什么用，这迫使每个开发者都要重新造轮子。

2. 官方文档既不是“容易理解的”，也不是“良好的”。

3. 相比 React 给你提供的好处，React 实在太大。而且对浏览器的支持也很有限。

React 的大小和 Angular 相当，但 Angular 是一个完整的应用框架。React 显而易见的臃肿，但是你只获得了很少的功能。希望这在将来能得到改善。

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 Apollo自动驾驶：引领未来的智能出行

前言 ![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg] 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍

悠悠/ 2024年04月06日 15:15/ 0 赞/ 25 阅读

相关 Apollo自动驾驶：引领未来的智能出行

自动驾驶技术正日益成为当今科技领域的焦点，它代表着未来出行的一大趋势，而Baidu公司推出的Apollo自动驾驶平台则在这一领域中展现出强大的领导地位。本文将深入探讨Apoll

柔情只为你懂/ 2023年10月15日 08:12/ 0 赞/ 73 阅读

相关一年增加 1.2w 星，Dapr 能否引领云原生中间件的未来？

![1.png][] 作者 | 敖小剑阿里云高级技术专家、Dapr Maintainer Dapr 是 2019 年 10 月微软开源的分布式运行时，在今年 2 月份刚刚

矫情吗；*/ 2022年11月15日 01:27/ 0 赞/ 96 阅读

相关引领新未来SOA服务框架，未来发展的方向

转载自作者 [陶邦仁][Link 1] http://my.oschina.net/xianggao/blog/638195 0 系列目录聊聊服务

墨蓝/ 2022年09月25日 02:19/ 0 赞/ 185 阅读

相关云原生引领全云开发时代

简介：云原生是近几年最火爆的技术热词之一，几乎所有的云计算产品都会或多或少跟云原生发生关联，云原生正在重塑整个软件的生命周期。但到底什么是云原生？云原生带来的最大的技术创新和

野性酷女/ 2022年09月04日 00:50/ 0 赞/ 193 阅读

相关低代码开发工具的先驱Delphi再次引领软件开发的未来

![欢迎再次来到互联网发展的未来][a4bcbcfc7ec0c5cec642faff3faa744f.png] 我有一些好消息要告诉你，软件开发的未来已经到来！好吧，准确地说

拼搏现实的明天。/ 2022年09月02日 11:49/ 0 赞/ 245 阅读

相关 React：引领未来的用户界面开发框架

[![Center][]][Center 1] [React：引领未来的用户界面开发框架][Center 1] 《React：引领未来的用户界面开发框架》是这

一时失言乱红尘/ 2022年08月08日 09:10/ 0 赞/ 143 阅读

相关《 React：引领未来的用户界面开发框架》试读

《 React：引领未来的用户界面开发框架》试读 React是什么？ React 仅仅是

爱被打了一巴掌/ 2022年04月12日 09:58/ 0 赞/ 156 阅读

相关微服务架构：引领数字化转型的基石

2018年双11，中国网民释放出来超过2000亿元的购买力，给快递公司带来了新的一轮考验。刚刚从大件快递切入快递市场的德邦快递，却无惊无险地完成了客户的托付。信任德邦快递的店主

左手的ㄟ右手/ 2022年03月02日 04:22/ 0 赞/ 223 阅读

相关指点2007年十大EDA主题，引领未来设计方向

[http://hi.baidu.com/hieda/blog/item/c034e42f82a8143b1f308994.html][http_hi.baidu.com_hi

以你之姓@/ 2021年10月20日 00:56/ 0 赞/ 362 阅读