如何更好的编写 async 函数 虽然 async/await 方式来处理异步请求，已经是比较非常好的方式了，但是有时候新手会乱用导致性能堪忧，这篇文章作者总结了他在项目迁移中更好的编写 aysnc 函数的方法。 实现双向绑定 Proxy 比 defineproperty 优劣如何? 双向绑定其实已经是一个老掉牙的问题了,只要涉及到 MVVM 框架就不得不谈的知识点。 可以实现双向绑定的方法有很多, KnockoutJS 基于观察者模式的双向绑定, Ember 基于数据模型的双向绑定, Angular 基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。 深度剖析：如何实现一个 Virtual DOM 算法 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法，并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望在阅读本文后，能让你深入理解 Virtual DOM 算法，给你现有前端的编程提供一些新的思考。
### Mvvm 前端数据流框架精讲 带大家了解什么是 mvvm，mvvm 的原理，以及近几年产生了哪些演变。 同时借 mvvm 这个话题拓展到对各类前端数据流方案的思考，形成对前端数据流整体认知，帮助大家在团队中更好的做技术选型。 译-RxJS 游戏之贪吃蛇 众所周知，Web 发展的很快。如今，响应式编程和 Angular 或 React 这样的框架一样，已经是 Web 开发领域中最热门的话题之一。响应式编程变得越来越流行，尤其是在当今的 JavaScript 世界。从命令式编程范式到响应式编程范式，社区已经发生了巨大的变化。然而，许多开发者还是十分纠结，常常因为响应式编程的复杂度(大量 API)、思维转换(从命令式到响应式)和众多概念而畏缩。 该应用使用 HTML5、JavaScript 和 RxJS 来将编程事件循环 (programmatic-event-loop) 的应用转变成响应事件驱动 (reactive-event-driven) 的应用。 前端性能优化之浏览器渲染优化 —— 打造60FPS页面 该文仅针对高性能渲染进行分析。详细的讲解了 CSS 优化 和 Javascript 的优化，一篇非常深入的文章
今天我想谈的react的优势有两点： 声明式写法更符合人性 减少dom操作使性能得以提升 现在我们就写一个最简单的计数例子来比较传统的jquery和react。 ...
声明：本文为译文，原文链接：https://www.robinwieruch.de/react-libraries React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。 这是优势还是劣势取决于你自己。 当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。 它带有一些内置的解决方案，例如，用于本地状态和副作用的 React Hooks。 下面的文章将向您提供一些自己总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。 如何开始 React 如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。 React 社区的现状是通过 Facebook 的 create-react-app(CRA)。 它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序。 所有的工具都对您隐藏起来了，但是最终要由您来更改这些工具。 如果你已经熟悉 React，你可以选择它流行的入门工具包之一: Next.js 和 Gatsby.js。 这两个框架都建立在 React 之上，因此你应该已经熟悉 React 的基本原理。 Next.js 用于服务器端渲染(如动态 web 应用程序) ，Gatsby.js 用于静态站点生成(如博客、登陆页面)。 如果您只是想了解这些初学者工具包是如何工作的，那么可以尝试从头开始设置 React 项目。 你将从一个基本的 HTML 和 JavaScript 项目开始，然后自己添加 React 和它的支持工具。...
文章首发于个人博客 前言 2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。 React 作为我最喜欢的框架，没有之一，我愿意花很多时间来好好的学习他，我发现对于学习一门框架会有四种感受，刚开始没使用过，可能有一种很神奇的感觉；然后接触了，遇到了不熟悉的语法，感觉这是什么垃圾东西，这不是反人类么；然后当你熟悉了之后，真香，设计得挺好的，这个时候它已经改变了你编程的思维方式了；再到后来，看过他的源码，理解他的设计之后，设计得确实好，感觉自己也能写一个的样子。 所以我今年(对，没错，就是一年)就是想完全的学透 React，所以开了一个 Deep In React 的系列，把一些新手在使用 API 的时候不知道为什么的点，以及一些为什么有些东西要这么设计写出来，与大家共同探讨 React 的奥秘。 我的思路是自上而下的介绍，先理解整体的 Fiber 架构，然后再细挖每一个点，所以这篇文章主要是谈 Fiber 架构的。 介绍 在详细介绍 Fiber 之前，先了解一下 Fiber 是什么，以及为什么 React 团队要话两年时间重构协调算法。 React 的核心思想 内存中维护一颗虚拟DOM树，数据变化时（setState），自动更新虚拟 DOM，得到一颗新树，然后 Diff 新老虚拟 DOM 树，找到有变化的部分，得到一个 Change(Patch)，将这个 Patch 加入队列，最终批量更新这些 Patch 到 DOM 中。 React 16 之前的不足 首先我们了解一下 React 的工作过程，当我们通过render() 和 setState() 进行组件渲染和更新的时候，React 主要有两个阶段： 调和阶段(Reconciler)：官方解释。React 会自顶向下通过递归，遍历新数据生成新的 Virtual DOM，然后通过 Diff 算法，找到需要变更的元素(Patch)，放到更新队列里面去。 渲染阶段(Renderer)：遍历更新队列，通过调用宿主环境的API，实际更新渲染对应元素。宿主环境，比如 DOM、Native、WebGL 等。...