赵_叶紫

1. 背景 目前我所在业务组是负责后台管理系统，但是对于使用的组件并没有引入第三方库，全有开发人员自己编写。但是对于Common Project还是处于拷贝的方式。然后萌生了对公共组件库进行管理的想法。这个方式有什么好处呢？ 能够沉淀组内组件，避免重复造轮子的缺陷。 统一维护组…

React源码分析所有文章均属原创，是结合网上别人的总结和分析源码所得。我觉得文章可能不是写的最好的一篇，但一定敢确定是比较详细的一篇。如果哪些地方不正确，请指正，因为自己也是小白一枚。 Scheduler模块我认为是比较困难的一部分，每次想啃这部分的时候，都想找理由退缩。幸运…

1. 为什么使用Fiber 如果使用过React15的人，可能大致了解，其实15版本是基于Stack Reconcilation。它是递归、同步的方式。栈的优点在于用少量的代码就可以实现diff功能。并且非常容易理解。但是它也带来了严重的性能问题。接下来，我们了解一下原因。 G…

在上一篇文章中，我们解析了render流程中FiberRoot的生成。而这一篇着重于在render步骤中执行的另一部分内容。会涉及到队列、更新等信息。但是不会着重于这部分，后续会进行学习。 2. unbatchedUpdates 什么是批处理，例如我们常使用的setState,…

在React16中，我们编写的Reac组件通过JSX编译得到一个虚拟DOM对象，渲染流程是jsx => element tree => fiber tree => html dom。这篇文章，我们就来分析一些fiber tree的生成。 1. render 在常见的开发环境中，…

1. React顶层API 列表 React的源码实际上并没有多少复杂的内容，它将mobile和pc公用的模块提取出来，而核心其实是在React-Dom和React-native中。在React的源码中，下面都是我们熟悉的API,但是我们这里只分析重点API。Hook相关API…

1. 为什么要在React中使用immutable React常用的继承实现方式有两种，React.Component和 React.PureComponent。 PureComponent类帮我们以浅比较的方式对比props和state，实现了shouldComponentU…

1. React Profiler 什么是React Profiler,以及如何使用，请参考 http://react.html.cn/blog/2018/09/10/introducing-the-react-profiler.html。 2. React 性能优化实例结果 …

这里先提一下，浏览器的Coverage,能够检测页面上运行中用到了哪些css和js。 Audits是站点的审计员，页面的大管家。他在5个大的方面对网站进行检测： Performance(性能)，Accessiblity(可访问性)，Best Practices(最佳实践)，SE…