《 React:引领未来的用户界面开发框架》 试读
《 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 显而易见的臃肿,但是你只获得了很少的功能。希望这在将来能得到改善。