当我一开始学习 React 的时候,记得我读了很多与它相关,却有着不同技术的文章。

我想特别指出,其中有一篇提到 React 的生态圈非常混乱,以至于让开发者觉得在使用 React 之前必须掌握其它所有与之相关的类库。

和一些有着 8 个月 React 使用经历的人一样,我仍然只是浮于整个生态圈的表面,甚至不知道这个庞大的系统是如何工作的。

但我花费在 React 中的时间已经足以让我明白,什么时候适合使用另外一个相关技术——Redux(一个 Flux 架构的实现),以及我为什么要使用它。

React 的好处很多,组件化简化了开发,虚拟 DOM 提升了页面性能,等等。当然,React 也有其缺点,其中影响最大的一点便是由于 React 是一个非常重型的框架,超过 2w 行的代码,即便是压缩后也超过 300k,导致了它的初始化加载非常费时。光是把这样的一个 JS 打包文件加载出来就要耗费一大笔时间,跟何况它的初始化执行过程也要达到百毫秒级,这样还是很影响用户体验的。

那么有没有什么方法能避免 React 这样的不足之处呢?

React 的渲染机制和其它类型的 MV * 框架有很大的区别。通过由数据构成的虚拟 DOM,React 便可在浏览器中一个根节点上渲染出一个完整的真实 DOM 树,从而完成整个页面的渲染。这是在浏览器客户端中完成的渲染操作。而在服务器(Node.js 环境)上,虽然没有 DOM,在客户端初次请求时,可以通过虚拟 DOM,将组件和数据渲染成真实 DOM 的 HTML 字符串,像其它后端语言如 PHP 那样把一个完整的 HTML 页面传输给浏览器,这就是服务端渲染。这同时也给了 React 一个很大的优势,让一个前端 View 层也有了 SEO 友好的展现方式。

近年来,React 已经成为开发者们建立从单页应用(SPA)到移动应用的一个新工具。但是自从我开始逐步深入 React 后,我发现所有看似非常酷的 Node 模块实际上对开发有非常不利的影响。它们不遵循任何规则,组件的体积巨大。它们为几乎所有的组件都使用了状态,也包括那些根本就不作输出的组件。任何有着足够经验的人都明白,维护这样的代码会有多麻烦,以及如果每次都渲染全部组件的时候,这在浏览器上加载会有多慢。在这篇文章中,我会带你探索 React 的最佳实践,包括如何设置 React 以及如何让它变得足够快。

在你开始阅读前请注意:React 是一个函数式编程(Functional Programming,FP)库,如果你不知道函数式编程是什么,请阅读其它相关文章。

这几年函数式编程逐渐火了起来。例如 Clojure、Scala 和 Haskell 这些编程语言已经吸引了很多对新技术着迷的程序员们的眼球,因为他们在某些方面有着巨大的优势。Immutable.js 的目标是把其中的一些优势通过简单直观的 API 带到 Javascript 中来。请跟着我们通过这篇文章来学习这些(benefits)并运用到你的项目中。

介绍:不可变(immutability)和 Immutable.js

尽管函数式编程的特变不仅仅在于其不可变,但很多的函数式语言都把不可变作为一个重点。例如 Clojure 和 Haskell,都对数据如何改变和何时能够改变做出了严格的编译时限制。正因这一点,许多开发者便放弃了这些语言。对于那些能够忍受住最初的煎熬的人们来说,解决问题的新方式开始变得多样起来。特别是对于初次接触的人来说,数据结构是函数式范式的主要的争议点。

近几年,“回调地狱(Callback Hell)” 一词经常被提及,成为 Javascript 并发管理中最为讨厌的设计之一。它让你忘记了代码本来应有的样子,以下便是 Express 中验证和处理一个交易的例子:

app.post("/purchase", (req, res) => {
    user.findOne(req.body, (err, userData) => {
        if (err) return handleError(err);
        permissions.findAll(userData, (err2, permissions) => {
            if (err2) return handleError(err2);
            if (isAllowed(permissions)) {
                transaction.process(userData, (err3, confirmNum) => {
                    if (err3) return handleError(err3);
                    res.send("Your purchase was successful!");
                });
            }
        });
    });
});
Copyright © 2017 dremy.cn
皖ICP备16015002号