React源码解析-从头写一个React的难点与思路

MayReact发布了~看看这是否是你想作的重写React~

https://github.com/sven36/MayReact

---------------------------------------------------------------------------------------------------------------------

2017-12-6更新：

这么长时间居然有好多人看过，还有几个小伙伴给个人github几个start，心中甚是惶恐，担忧误人子弟，便再更新本身的一些见解。

 

言归正传：其实当时个人水准应当还算能够~毕竟看了不少不少书~  不过对React的理解仍是有些勉强了，当时写这个LittleReact算是照猫画虎吧，跟着断点一点一点写下来了的，因此只是描摹了一些，不少地方都没有思考过；

虽然努力不会白费，但这样写一遍下来对React的理解我估计撑死也就三成；

 

若是你工做比较稳定，没那么着急~那就这么来：真正的本身实现一个React，先学会karma  rollup这两个工具karma是用来作单元测试的，rollup是用来打包代码的；把preact(迷你版react),react,anu(司徒正美先生写的一个类react框架很棒的),下载到本身本地，react的单元测试是用的facebook本身的jest先不用管~，先看preact这个库比较简单，而后本身一点点写，写一部分而后就跑跑单元测试（单元测试这个三个框架都有，本身一点一点写类似的单元测试）；过程当中必定要本身写，把React对应的api当成黑盒子本身

实现本身的逻辑，实在不知道怎么写再看看别人怎么写的，这个过程会比较漫长，不过你确定会收获满满~我如今就在这么作~在这给你安利下个人  MayReact    https://github.com/sven36/MayReact

最后的效果就是你会写一个能在生产环境使用的React~由于你最终会把全部的单元测试都跑一遍~ 再以后就是一样的思路写写react-redux,react-router,那时再使用React  如烹小鲜尔~（我目前还在写React之中，这些都完成以后我打算写写webpack和babel了~）

路漫漫其修远兮~愿你我都能孜孜以求~

 

 

----------------------------------------------------------------------------------------------------------------------------2333的分割线~~如下为原文就不修改了算是对本身的中二一种记念吧~---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前言：最近一直在看React源码，看了几天总有雾里观花之感；便想着本身从头写一遍，这几天基本上写了个大概了；

React的VirtualDOM,DOM diff,生命周期管理，单向数据流动等等都具有了；

固然也省略了很是多的细节和检查，事件系统和CallBackQuenue,PoolClass等都没有~（暂时DOM diff不太全，我再想一想怎么写更好）；

不过这样足够理解React了，并且React剩下的部分看看就基本知道做用了；

代码我已经上传到GitHub，地址是：https://github.com/sven36/LittleReact

 

 

 

那么言归正传：说一说我我的感受其中比较可贵地方和一些思路；（我使用的是React15.3版本）

首先：React如今已经很是庞大了，我当初本想多写几篇一点一点介绍的，不过我发现即便写了光看的话确定看不明白的，最好的方法只能是本身写一遍；

第二点：必需要首先弄懂Transition事务模块；

Transition模块：如今React绝大部分模块都须要Transition触发的，这个是一个包裹函数，构造函数需原型继承Transaction，或原型方法逐个赋值。且getTransactionWrappers方法用于添加前置钩子与后置钩子；reinitializeTransaction方法在初始化时调用，用于清空前、后置钩子；perform方法实际执行method函数、及先后钩子。（看不懂能够去跑一跑个人Git上的示例）

第三点：ReactElement以及ReactComponent；传入的参数先转化为ReactElement，而后根据不一样的node类型转换为不一样的ReactComponent;

第四点:ReactComponent的递归渲染和ReactClass的原型混入传入的参数，在递归渲染时原型调用（这个我有些说不明白），我是调试React的运行过程，看了十来遍看明白的~~

第五点：纸上得来终觉浅，绝知此事要躬行~~

 

如图：绝大部分代码都加上注释了，想本身写一写的能够参照一下；

最后附上个人参照资料，也深深感谢这两位做者：

http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_two/

http://schifred.iteye.com/category/368891