如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…

本文是笔者写组件设计的第九篇文章, 今天带大家实现一个轻量级且可灵活配置组合的模态框(Modal)组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈. 通用型组件: 比如Button, Icon等. 布局型组件: 比如Grid…

在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。 react-dev-inspector 就是应此需求而生。 可以在 预览网站 体验一下。 需要加一个 webpack loader 去遍历编译前…

在前面三篇文章中，我们阐述了react组件的构成与生命周期，setState的机制。这次我们来谈谈React的事件处理。 我们通常监听真实DOM。举🌰来说，我们想监听按钮的点击事件，那么我们在按钮DOM上绑定事件和对应的回调函数即可。 遗憾的是若页面复杂且事件处理频率高，那么…

本文将从 render 函数的角度总结 React App 的优化技巧。需要提醒的是，文中将涉及 React 16.8.2 版本的内容(也即 Hooks），因此请至少了解 useState 以保证食用效果。 正文开始。 当我们讨论 React App 的性能问题时，组件的渲染速…

前言一般情况下，我们写React项目，用create-react-app脚手架开发比较方便，但是如果要写一个插件的话，用三方脚手架就显得有点臃肿了，我们可以自己配置一个符合我们开发的简单工具，本文教你

我想很多和我一样的朋友小时候都看过《天龙八部》，里面的女主角王语嫣是个武学博才，但自己却毫无实战。比如段誉和慕容复交手时，她连连口述指导："段郎，二龙爪手，抢珠三式，当心你的腰肋，注意你的气户穴。潘月偷心，扶手相望......"，虽然看着感觉都是一些最基本的拳脚功夫，但有解说在…

"高阶"二字听起来非常唬人，因为大学高数课上的高阶方程让人抓狂，从而让第一次接触"高阶组件"概念的人们误以为又是什么高深的思想和复杂的逻辑。但相信在你学习完成后和生产环境大量使用过程中，就会发现这个所谓"高阶组件"真的一点也不高阶，非常简单易懂。本文通过回答三个问题带你深入浅出…

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 使用Proxy，你可以将一只猫伪装成一只老虎。下面大约有6个例子，我希望它们能让你相信，Proxy 提供了强大的 Javascript 元编程。 尽管它不像其他ES6功能用的普遍，但Proxy有许多用途，包括运…