1. 项目基本准备工作 以这样的方式使用ReactDOM，说明他有render这个方法。 好了，现在我们给每一个 元素打上 一个标记 ，这样的话 就可以通过这个标记 辨别出与其他 元素的关系，也可以直接通过这标记找到该元素了。 4. 重构render方法 默认传入的elemen…

Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 假设某一天，我们接到了需求，需要开发…

上一篇文章我们讲了React-Router的基本用法，并实现了常见的前端路由鉴权。本文会继续深入React-Router讲讲他的源码，套路还是一样的，我们先用官方的API实现一个简单的例子，然后自己手写这些API来替换官方的并且保持功能不变。 在这个壳里面还引用了两个库reac…

本文是一篇入门级源码分析类文章，对于源码了解较深者也可以阅读本文多多指点笔者一二。 其实我们在初始化生成fiber结构时，我们会给每个节点都标记成新增节点，此处我们会判断节点是否有firstEffect，如果有那么这便是子节点的副作用，即子节点，并且把它挂载到副节点上，继续判断…

对于 React 16.7 中新的 hooks 系统在社区中引起的骚动，我们都有所耳闻了。人们纷纷动手尝试，并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法，React 以某种甚至不用暴露其实例（起码没有用到这个关键词）的手段管理了你的组件。那么 React 究竟捣了什…

正当移动互联网进入白热化阶段时，以微信小程序为代表的一类“轻应用”异军突起。它们无需下载，使用方便，“用完即走”，同时功能也较为完备，一经推出即得到了各大平台和及用户的热烈追捧。但是问题也随之而来——开发者们要同时维护 Web 端、移动端、微信小程序、支付宝小程序等等多套用户界…

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

用行话说，测试表示检查我们的代码是否满足一些期望。例如，一个名为 transformer 的函数在接收一个输入（input）后，返回一个预期输出（expected output）。 本文介绍的 Jest 教程覆盖的是单元测试，但在文末，也给到很多其他类型测试的资源，方便大家学习…

react hooks出了有一段时间，hooks的各种用法也渐渐被大家所了解，在体验过hooks写法之后，对于react，又有了新的感受，那就是大道至简，react又一次从写法层面上革新了我们对于面向UI编程的理解。 于是我选择在保证业务稳定的情况下，将后台项目中用到的各个组件…