React 体系下关于 Mobx 与 Redux 的一些思考

Redux VS Mbox（Immutable VS Mutable），这两种不同的思路会导致它们在与 React 这样的致力于 Immutable 数据的框架进行结合时，产生完全不同的结果。如果不去仔细区别，很容易被经过包装之后的各种五花八门的库迷惑。

小程序技术方案探讨

微信小程序上线大半年，大部分技术原理也有文章介绍了，本文尝试从需求出发探讨微信小程序技术方案的来源，以及最近公测的支付宝小程序技术方案的考量。

渔人和Rxjs的故事

你一定要坚持看完这个故事，看完你一定会懂Rxjs.千万不要觉得故事情节没有《盗墓笔记》好看而放弃。因为臣妾实在是只能把枯燥的程序写成这个很（挺）有（简）趣（陋）的故事了。

万字解析微前端、微前端框架qiankun以及源码

本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。

微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

qiankun（乾坤） 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

Vue 开发必须知道的 36 个技巧【近1W字】

Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;
Vue 基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文列举了 36 个 vue 开发技巧;
后续 Vue 3.x 出来后持续更新.

React 开发必须知道的 34 个技巧【近1W字】

React 是前端三大框架之一,在开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学

React 框架运行时优化方案的演进

这篇文章的主要目的，就是根据 React 主要优化策略几个阶段的演进，来把这些概念梳理清楚，看看 React 这几年到底在搞什么东西，以及顺便解读一下最新更新的这些特性。在分享里面我们可能不会很详细的去分析具体的调度流程和细节，但是我们会在一些优化策略上节选一些源码进行解读。

微信小程序技术原理分析

互联网生态演进：超级 APP + 小程序成为「轻应用时代」下的新生态。

React.memo() 和 useMemo() 的用法与区别

本文翻译自 Adebola Adeniran 在 LogRocket 论坛中关于 React.memo() 和 useMemo() 对比与用例分析。

[React技术内幕]:setState的秘密

对于大多数的React开发者，setState可能是最常用的API之一。React作为View层，通过改变data从而引发UI的更新。React不像Vue这种MVVM库，直接修改data并不能视图的改变，更新状态(state)的过程必须使用setState。

刨根问底，揭开 Vue 中 Scope CSS 实现的幕后（原理）

我想大家应该都对 Vue 的 Scope CSS 耳熟能详了，但是说起 Vue 的 Scope CSS 实现的原理，很多人应该会说不就是给 HTML、CSS 添加属性吗 🙃️？

确实是这样的，不过这只是最终 Scope CSS 呈现的结果。而这个过程又是如何实现的？我想能回答上一二的同学应该不多。

那么，回到今天本文，我将会围绕以下 3 点，和大家一起从 Vue 的 Scope CSS 的最终呈现结果出发，深入浅出一番其实现的底层原理：

• 什么是 Scope CSS
• vue-loader 处理组件（.vue 文件）
• Patch 阶段应用 ScopeId 生成 HTML 的属性

React组件到底什么时候render啊

React 到底什么时候才会 render？

在你写memo()之前

在这篇文章里，React 核心开发者 Dan 分享了关于 memo 的两种不同的技巧。它们十分基础，这也正是为什么人们很少会意识到它们可以提升渲染性能。这些技巧和你已经知道的内容是互补的，它们并不会替代 memo 或者 useMemo，但是先试一试它们还是不错的

轻松理解webpack热更新原理

Hot Module Replacement，简称HMR，无需完全刷新整个页面的同时，更新模块。HMR的好处，在日常开发工作中体会颇深：节省宝贵的开发时间、提升开发体验。

React技术揭秘

本书的宗旨是打造一本严谨、易懂的React源码分析教程。为了达到这个目标，在行文上，本书会遵循：

• 不预设观点 —— 所有观点来自React核心团队成员在公开场合的分享。
• 丰富的参考资料 —— 包括在线Demo、文章、视频。
• 保持更新 —— 在React版本更新后会及时补充。当前版本v17.0.0-alpha。

React 事件系统工作原理

React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。

vue3源码解析和最佳实践

这是一个收录 vue3 源码解析和关于 vue3 的最佳实践的网站，网站分为两部分，vue3 源码解析和vue3 最佳实践，你可以根据你的需要进行阅读。另外网站作者之前也做过一次 react 的源码解析，是基于 react 16.7 版本的，网址在这里

React Fiber Architecture

Fiber introduces several novel concepts that are difficult to grok solely by looking at code. This document began as a collection of notes I took as I followed along with Fiber’s implementation in the React project. As it grew, I realized it may be a helpful resource for others, too.

揭开 React Hooks 的神秘面纱:数组解构融成魔法

我超喜欢 React 新出的这个 Hooks API。而在使用它时却有一些奇怪的规则。为了那些纠结于为什么要有这些规则的人，在这里我会以模型图的方式来向你们展示这个新的 API。

一文吃透 React SSR 服务端渲染和同构原理

全网最完整的 React SSR 同构技术原理解析与实践，从零开始手把手带你打造自己的同构应用开发骨架，帮助大家彻底深入理解服务端渲染及底层实现原理，学完本课程，你也可以打造自己的同构框架。

React Fiber

react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的（“一气呵成”）。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得react在动画、手势等应用中效果比较差。
为了解决这个问题，react团队经过两年的工作，重写了react中核心算法——reconciliation。并在v16版本中发布了这个新的特性。为了区别之前和之后的reconciler，通常将之前的reconciler称为stack reconciler，重写后的称为fiber reconciler，简称为Fiber。

Why React Hooks?

通过代码非常详尽地解释了为什么会有 React Hooks，以及它的优缺点和注意事项，通俗易懂

【译】什么时候使用 useMemo 和 useCallback

性能优化总是会有成本，但并不总是带来好处。我们来谈谈 useMemo 和 useCallback 的成本和收益。

关于ref的一切

作为React开发者，你能回答如下几个问题么？

1. 为什么string类型的ref prop将会被废弃？
2. function类型的ref prop会在什么时机被调用？
3. React.createRef与useRef的返回值有什么不同？

其实，这三个问题中的ref包含两个不同概念：

1. 不管是string、function类型或是React.createRef、useRef创建的ref，都是作为数据结构看待

2. 问题2探讨的时机是将ref作为生命周期看待

该文会分别从数据结构、生命周期两个角度探讨ref。这，就是关于ref的一切。作者还写了关于 React 的其他文章共十篇：#关于React的一切

为什么Vue3.0不再使用defineProperty实现数据监听？

Vue 3.0 中，响应式数据部分弃用了 Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么 Vue 选择弃用 Object.defineProperty。

1. Object.defineProperty 真的无法监测数组下标的变化吗？
2. 分析 Vue2.x 中对数组 Observe 部分源码。
3. 对比Object.defineProperty和 Proxy。

从 IIFE 聊到 Babel 带你深入了解前端模块化发展体系

作者从十年前的 IIFE 开始介绍，一步步分析与介绍了前端模块化的演进与发展，文章很长，信息量很大。

这几个概念你可能还是没搞清require、import和export

作者从一开始的 Function 到后来的对象写法再到后来的闭包写法，介绍了模块写法的演进历程，同时还介绍了CommonJS规范、AMD规范、CMD规范和AMD与CMD的区别

useEffect 完整指南

该文篇幅较长，深入讲解了 React Hook 中的 useEffect，看完后可以帮你明白下面几个问题的答案：

1. 🤔 如何用useEffect模拟componentDidMount生命周期？
2. 🤔 如何正确地在useEffect里请求数据？[]又是什么？
3. 🤔 我应该把函数当做effect的依赖吗？
4. 🤔 为什么有时候会出现无限重复请求的问题？
5. 🤔 为什么有时候在effect里拿到的是旧的state或prop？

前端构建秘籍

你对 webpack 了解多少？如何针对业务集成最佳配置？如何优化开发体验？如何开足马力，实现极速的 webpack 的构建性能 🚀？又会有哪些坑 💣？该文带你解答这些问题

import、require、export、module.exports 混合使用详解

该文通过以下几个问题进行展开，详细介绍了模块化相关规范以及 webpack 和 babel 在这其中起到的作用：

1. 为何有的地方使用 require 去引用一个模块时需要加上 default？ require(‘xx’).default
2. 经常在各大UI组件引用的文档上会看到说明 import { button } from ‘xx-ui’ 这样会引入所有组件内容，需要添加额外的 babel 配置，比如 babel-plugin-component？
3. 为什么可以使用 es6 的 import 去引用 commonjs 规范定义的模块，或者反过来也可以又是为什么？
4. 我们在浏览一些 npm 下载下来的 UI 组件模块时（比如说 element-ui 的 lib 文件下），看到的都是 webpack 编译好的 js 文件，可以使用 import 或 require 再去引用。但是我们平时编译好的 js 是无法再被其他模块 import 的，这是为什么？
5. babel 在模块化的场景中充当了什么角色？以及 webpack ？哪个启到了关键作用？
6. 听说 es6 还有 tree-shaking 功能，怎么才能使用这个功能？

基于 webpack 的持久化缓存方案

如何基于 webpack 做持久化缓存似乎一直处于没有最佳实践的状态。作为开发者最大的诉求是：在 entry 内部内容未发生变更的情况下构建之后也能稳定不变。而 pigcan 的这篇文章通过具体的场景层层深入，带你逐步揭晓 webpack 持久化缓存的实现方案

让虚拟DOM和DOM-diff不再成为你的绊脚石

作者通过实际代码一步步地对虚拟 DOM 实现和 Diff 算法进行了讲解和实现，讲解的很清楚，逻辑很清晰

为什么顺序调用对 React Hooks 很重要？

同事推荐，对 React Hooks 讲解的很清楚，而且非常贴心的把评论神马的都翻译成了中文

react 组件的生命周期

作者详细介绍了和 react 生命周期的一些函数执行时机以及它们的作用，通过实例的方式进行了讲解，个人感觉讲解的非常清晰

Gulp 和 Webpack 对比

作者通过实际的代码对比了 gulp 和 webpack 在功能、原理以及模块化方面的优缺点

webpack 常用插件及其作用

介绍了 webpack 经常用到的一些插件和它们的作用，美中不足的是没有具体代码以及介绍的插件有点少

webpack 源码阅读——npm 脚本运行 webpack 与命令行输入 webpack 的区别

虽然是一个小知识点，不过作者读源码的精神可嘉

webpack - 收藏集 - 掘金

掘金上面的 webpack 相关文章，webpack 本身实在太复杂，还是需要一些文章差补缺漏的

Vue.js——60分钟快速入门

vue 入门教程，还有另外两篇文章，文章最后有链接，个人认为是目前为止看到的最舒服的 vue 入门教程，排版配色都很不错

深入到源码：解读 redux 的设计思路与用法

一直都没搞明白 redux，后来看了这篇文章，讲的很详细，而且讲解了一部分源码，推荐！（下面一段话取自该文章） 组织 redux 的流程莫过于：

• 设计全局 state 的数据结构
• 设计更改 state 数据的 actionTypes 常量以及其他跟视图展现相关的 actionTypes 常量
• 根据 actionTypes 常量，书写 actionCreator 。
• 根据各个 actionCreator 的返回值，涉及 reducer 做数据的最后处理
• 在有了 reducer 函数之后，createStore(reducer, initState) 得到 store 对象
• 用 bindActionCreators 函数将 actionCreators 和 store.dispatch 绑定起来，得到一组能修改全局状态的函数
• 分发各个状态修改函数到各个 DOM 事件中。

Vue 生命周期深入

这篇博客会从下面四个常见的应用诠释了组件的生命周期，以及各个生命周期应该干什么事，博主写的很不错，直观易懂，很适合接触 vue 不深的童鞋。

1. 单组件的生命周期
2. 父子组件的生命周期
3. 兄弟组件的生命周期
4. 宏 mixin 的生命周期

2019 年 Vue 学习路线图

作者我将在这篇文章中展示了一个高级“知识地图”，它包含了与 Vue 开发相关的关键领域，你可以使用这张地图作为 2019 年学习 Vue 的图鉴。英文原文：https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/

一口(很长的)气了解 babel

作者详细介绍了 babel 究竟是做什么的，以及 babel 的一些配套工具的作用，同时还介绍了如何争取地进行配置和使用 babel。

Which of the 635000 npm modules do I choose?

npm 现在已经有 60 多万个库，如何在如此繁杂的 module 中选择合适自己的感觉是件难事，而作者就基于此对一些比较大型使用比较多的库进行了横向比较，会对你在技术上的选择起到帮助作用。

2019 年 React 学习路线图

和上面的 Vue 学习路线图类似，建议搭配食用，英文原文：https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02

细说 webpack 之流程篇

淘宝 FED 这篇博客，对 webpack 的整体流程梳理的非常清晰，以及 webpack 的基础架构讲解的很细致，对 compiler 和 complation 对象也做了很细致的剖析。

React 是怎样炼成的

文章主要讲述 React 的诞生过程和优化思路。内容整理自 2014 年的 OSCON - React Architecture by vjeux，虽然从今天来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥 Facebook 优秀的工程管理文化。