Deep In React (四) stack reconciliation

在前一篇文章中我们谈到了DOM diff的基石,Internal Instance。同时我们也留下了一些悬而未解解的问题,比如Internal Instance到底有什么更进一步的应用。在这篇文章中,我们来了解一下基于Internal Instance的stack reconciliation(DOM Diff算法)

阅读全文

Deep In React (三)Internal Instance

在上一篇文章中我们谈到了React的递归式渲染这个名词,那么一个React element经过了怎样的变化最后映射成了对应的DOM结构,Reacte element又是怎样在DOM树中挂载/卸载的?这篇文章会带你一探究竟。

阅读全文

Deep In React (二) Component,Element和渲染

在上一篇文章中,我们谈到了如何从应用层面优化React的性能,在随后的几篇文章中,我们将深入React的底层实现,仔细分析一下为什么React会有如此高的性能。在介绍React底层的reconciliation算法之前,我们需要先了解一些先导知识。

阅读全文

Deep In React (一) 高性能React组件

React在推向社区之初, 一个备受社区欢迎的点就是React的优秀的性能。得益于React出色的架构, React相比于传统的方式确实快很多。但是在实际开发中也存在着很多React性能的陷阱。虽然我们绝大多数时候其实不需要过于关心React的性能问题,但是当需要提升性能时,我们也会有一些很好的切入点去做这件事情.

阅读全文

使用Typescript给JavaScript做静态类型检查

TypeScript,作为JavaScript的超集,给JavaScript带来了强类型这个非常强大的特性,给前端的开发以及重构带来了很大的便利性。但是,即使TypeScript现在已经可以直接使用用JavaScript编写的模块了,有很多遗留项目想要立马迁移到TypeScript也并非易事。但是好消息是,TypeScript在2.3版本引入了Js Type Checking,从此,不需要任何对于已有代码的侵入,你也可以很好的享受TypeScript带来的一些特性了。

阅读全文

使用Yarn Workspace管理多project repo

node的包管理方式和js社区重复造轮子的坏习惯一直为人所诟病。Yarn的横空出世很好的解决了单个package.json之下依赖重复的问题。对于多个package.json的项目,有没有办法解决呢?答案是Yes,Yarn workspace能很好的帮你做到这一点。

阅读全文

使用Jest进行Javascript单元测试

有人觉得,单元测试这玩意儿一直是个玄学,尤其是前端的单元测试。后端单元测试至少还能起到验证业务逻辑的作用,但是在传统的 Web 项目中,前端的主要作用只是简单的输出页面 UI,并附加一些命令式的交互绑定。总而言之,前端既难以测试(因为绝大多数命令式的代码和 DOM 强绑定,很难使用单元测试独立出来),又没有太大的必要去测试。 但是随着技术的发展,类似 React、Angular 这种大型的 UI 框架如雨后春笋般冒出来并且被越来越多的人开发者所接受。打开一个最近流行的前端项目,你会发现前端项目的复杂度已大大超过以前,前端也开始承担越来越多的业务逻辑。于此同时,由于大型 UI 框架的使用,前端代码也变得越来越声明式,意味着其可测性变得越来越好。重新审视我们的前端单元测试,我们会发现其重要程度已经不亚于后端的单元测试。 说到前端测试框架,市面上其实已经有了 Jasmine/Mocha 这种成熟的测试框架,但是今天我们更多的来聊聊 Jest。

阅读全文