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

     

相关推荐