为了保证的可读性，本文采用意译而非直译。 下列工具中的重要性与排序无关。 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。 Webpack Bundle Analyzer创建一个实时服务器，并提供依赖…

通过实现一个json在线编辑器,来学习如何一步步封装自己的组件(不限于react,vue,原理类似). 在介绍组件设计思路之前,有必要介绍一下著名的SOLID原则. S 单一功能原则: 规定每个类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来。所有它的服务都应该严密…

React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 …

笔者最近用时下正新鲜的hooks api重构了自己的项目,其中踩到了一些坑在此与大家分享一下。 考虑这样的场景：网页内容分为数页(每页fixed定位),鼠标滚轮触发翻页,类似ppt的感觉,我们用currPage这个状态来记录当前页码,然后在componentDidMount中挂…

本文讲解了如何使用“响应式编程”的方式以少量的代码实现出超棒的无限滚动加载列表。对于本文，我们将使用 RxJS 和 Angular。如果 RxJS 对你来说是全新概念的话，那么最好先阅读下官方文档。但无论是使用 Angular 还是 React，都不会影响到本文的流畅度。 几天…

本文涉及到的代码已经整理到 github 仓库中，用 cra 搭建了一个示例工程，关于性能优化的部分可以打开控制台查看重渲染的情况。 勾选、全选与反选。 根据选中项计算总价。 首先我们请求到购物车数据，这里并不是本文的重点，可以通过自定义请求 hook 实现，也可以通过普通的 …

本文主要介绍 24 中 es6 方法，这些方法都挺实用的，本本请记好，时不时翻出来看看。 页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CS…

本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。 有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、use…