《 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 显而易见的臃肿，但是你只获得了很少的功能。希望这在将来能得到改善。