标签「react」(共 3 篇文章)

当我一开始学习 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)库,如果你不知道函数式编程是什么,请阅读其它相关文章。

Copyright © 2017 dremy.cn
皖ICP备16015002号