距离react16发布已经过去很久了，facebook开发团队耗时2年多，究竟做了什么呢。从下面两张图中可以很直观的看出，react16带来的性能优化 造成这样的现象主要是因为：单个网页由js、UI渲染线程、浏览器事件触发线程、http请求线程、EventLoop轮询的处理线程…

我们来研究一下最近天天都在使用 React Hook。说起 Hook，烧烤哥也用了好一阵子了，但是一直不知道 Hook 背后到底是怎么运作的，在出现 Bug 的时候只能靠一半猜一半试来解 Bug，这显然是不行的。所以，今天开始就让我们来把 React Hook 慢慢烤透，以便在…

0. 安装 1. 先跑一个简单例子 2. 基础使用 BrowserRouter 是需要服务端配合, 是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。 需要匹配的将要被重定向路径。 若为真，重定向操作将会把新地址加入到访问历史记…

下面的代码就是实现组件订阅 Store 数据更新的，它在 connectAdvanced.js 中的。

一. redux的实现 在一切开始之前，我们首先要回答一个问题：为什么我们需要redux，redux为我们解决了什么问题？只有回答了这个问题，我们才能把握redux的设计思路。 React作为一个组件化开发框架，组件之间存在大量通信，有时这些通信跨越多个组件，或者多个组件之间共…

生命周期，顾名思义，就是从生到死的过程。 而生命周期钩子，就是从生到死过程中的关键节点。 每到关键节点，我们总希望有一些沉思时刻，因为这时候做出的决策会改变人生的走向。 React组件也一样，它会给开发者一些沉思时刻，在这里，开发者可以改变组件的走向。 React花了两年时间祭…

命令行中的 --fix 选项可以自动修复一些该规则报告的问题。 选项 "ignoreRestSiblings": 选项是个布尔类型 (默认: false)。使用 Rest 属性 可能会“省略”对象中的属性，但是默认情况下，其兄弟属性被标记为 “unused”。使用该选项可以使 …

​ 项目搭建是基于create-react-app脚手架的，以前开发过程中，也曾自己搭建过一些脚手架，由于水平有限，对于webpack实在玩不熟，最后考虑到效率和普及性，决定还是使用官方脚手架，再做一些适应性调整。好了，话多说，首先本地安装node之后(可以安装一下yarn)命…

我在2年之前，写过一篇中小型项目的前端架构浅谈。随着能力的上升，以及在阿里巴巴工作的经验，是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现，而是尝试从更高角度出发，分析为什么要这么做，这些设计能解决什么问题，成本和收益如何。 由于作者能力有限，可能会有…