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

爱被打了一巴掌 2022-04-12 09:58 246阅读 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 条评论，246人围观）

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

相关阅读

相关【人工智能】人工智能 – 引领未来科技的潮流

通过制定合理的政策和规范，我们可以确保人工智能技术在促进社会发展的同时，保护每个人的权益，共创一个更加美好的未来。自1956年人工智能这一概念提出以来，这一领域经历了多次...

冷不防/ 2024年04月25日 08:46/ 0 赞/ 106 阅读

相关解锁无限可能，Roxlabs引领未来网络新体验

在数字时代的今天，我们对于高速、安全和无限畅通的网络体验追求愈发的迫切。但不可避免的安全隐患等问题也随之产生，选择一款优秀的IP代理品牌成了首要问题之一。Roxlabs ...

客官°小女子只卖身不卖艺/ 2024年04月20日 12:07/ 0 赞/ 92 阅读

相关引领未来：探索工作报告中的计算机行业发展

2024《工作报告》官方文章地址链接：[最全！50个动态场景看2024《工作报告》全文][50_2024] 在当前信息技术飞速发展的背景下，工作报告作为一年一度重要文

阳光穿透心脏的1/2处/ 2024年04月06日 15:41/ 0 赞/ 97 阅读

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

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

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

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

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

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

相关 PyTorch 和 TensorFlow 引领未来

在研究领域主导地位的 PyTorch 顶使用 PyTorch 与 Tensorflow/PyTorch 的论文比率——2019 年PyTorch 中实现了大多数研究 ![f

ゝ一世哀愁。/ 2023年06月10日 05:24/ 0 赞/ 44 阅读

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

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

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

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

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

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

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

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

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

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

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

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