都说JSX会被babel编译成React.createElement方法，那它具体是怎么实现的呢？在React17版本中，又做了哪些改进呢？带着这些问题，我们去React的源码世界里去一探究竟！

什么是SFC？一个SFC是如何变成浏览器上可执行代码的？点进来，5分钟搞懂。

说到Diff，我们可能首先想到的就是Vue或者React中的一种更新算法，目的就是为了找出差异更新DOM树。而算法本质上是一类问题的最优解，Diff本身是差分、不同的意思，还有诸如字符串或者JSON的Diff，Linux系统中经典的文件Diff。这里我们要探讨的其实就是树的Diff,它的发展历程其实是经过了很长的一段时间。

代码逻辑复用 是我们开发人员减少代码重复度，进行代码优化的一个重要因素，上期我们的同学分享了关于 Vue 框架的相关逻辑复用的方法及原理，本期我们一起来了解下 React 框架中的逻辑复用。

多种特征提取器和优化方案哪种方案效果最优呢？

身为前端工程师，势必听过这个问题：“Vue 与 React 有什么区别？” 的确，Vue和React都是目前最流行、生态最好的框架，整体的功能也非常相似。

对此，我们组织了一次 diff 主题分享，采用奇葩说的模式，针对同一功能讨论下 vue 与react 的异同。本月主题将围绕以下角度带大家更深刻的认识vue和react框架: 组件及逻辑复用，diff算法，编译构建及运行，渲染。

vue与react都推崇组件式的开发理念，那么我们第一篇从组件开始，话不多说，直接进入本篇的正题：vue 组件及逻辑复用的源码解析。

瀑布流布局算是一种比较流行的布局，参差不齐的多列结构，不仅能节省空间，还能在视觉展示上错落有致不拘一格。

随着今年政府对互联网的监管，在不少时候一个紧急需求只给1～2天整改上线，而且整改过程中需求也不是很明确，相关部门也不会给一个详细的需求文档让我们去开发，大家都是“猜测”需求的内容。在这种场景下，如果App具备动态更新的能力，会给公司减少很大的成本。面对需求不确定和紧急修改页面部分元素的能力，给予了动态化最合适的使用场景，而不只是Fix几个BUG。

Fair在58集团内的部分Flutter App中已经落地，终使集成Fair后的App获得了动态化的能力。以下文章内容主要以安居拍房App为例，介绍集成Fair的架构、业务场景所需的能力预埋，以及如何进行原生和动态化代码的维护，持续发挥Flutter的性能。

本文的初衷是想让更多的同学知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑，请耐心观看。

Vue项目中使用的element-ui，由于弹窗里表单项太多，一些表单项会在可视范围之外。校验表单时，如果未通过校验的表单项在可视范围外，用户感知不强。所以需要在表单校验未通过时滚动到第一个未通过校验的表单项那里，翻看element-ui文档，发现未提供该API。

起初想到的方案有两种：

1. 在业务中封装函数，表单校验失败时调用该函数，根据表单校验失败的className，获取第一个校验失败的dom元素，滚动到指定的dom元素位置。但是如果页面存在多个form表单需要做区分，会增加我们的一个工作量，并且不够优雅。
2. 修改element-ui的源码，增加一个API。但是在平台编译时如果重新执行npm install时代码会被覆盖，并且团队协作时也会遇到这个问题，团队开发中有诸多不便。

后面经过一顿搜索后，发现一个“黑魔法”的解决方案。并且该方案上手简单、便携、且一劳永逸。

由于客户端每次更新的时候，都需要经过发布平台的审核，不管是需要紧急修复的bug，还是想要快速上线的需求，都绕不过审核这个问题。而很多开发者都会遇到一个问题，就是审核时间过长。审核过长可能会导致bug不能及时修复，严重者造成巨大的经济损失。也可能导致新的业务无法及时上线，错失业务的最佳推广时机。所以，长久以来，客户端都存在一个热门的话题，那就是热更新。

具体能否完全代替redux，还有待考证，本文仅提供思路。

语法糖（英语：Syntactic Sugar ）是指 计算机语言 中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。Fair 语法糖 并不是为Dart语法提供易用性的接口，而是为了让Fair在布局和逻辑混编场景下构建更方便。

Flutter在release环境是以AOT模式运行的，这就决定了我们要做动态化的话无法简单的通过动态下发dart代码执行的。根据Fair团队的前期调研，我们对布局动态化和逻辑动态化的实现采用了两套不同的实现方案，对于布局部分，我们在解析dart源文件之后生成DSL产物下发，然后在端上解析DSL构建布局的方式，逻辑动态化的部分，我们采用的是dart源码转js下发的方式。

Fair 逻辑动态化，是对一期布局动态化的增强。为了实现逻辑动态化，我们当时考虑了多种方案，方案主要集中在这三个方面，一种是对google提供的JIT进行裁切，第二种是自定义解析引擎，第三种借助js的能力。

base64的编码原理网上讲解较多，但解码原理讲解较少，并且没有对其中的内部实现原理进行剖析。

在探究base64编码原理和解码原理的过程中，我们首先需要了解下面会用到的算法和逻辑运算的概念，这样才能真正的吃透base64的编码原理和解码原理，体会到其中算法的精妙，甚至是在思考的过程中得到意想不到的收获。