Posts by Tags

在对React整体架构有了基本认识的基础上，学习React源码最直接有效的方式就是亲自调试代码，在关键的代码调用处打断点、查看变量赋值以及函数调用栈等等。而常见的调试工具包括不限于Chrome Sources、 VS Code。根据React源码构建的位置，调试由易到难大致可以划分为三个思路：

1. 调试npm registry中的React构建产物
2. 调试本地构建的React产物
3. 调试React源码和项目代码共同构建的产物

程序员对于“源码”似乎天然保持着“敬畏”的心理，尤其是对React这样知名的开源项目心里总不能避免产生这样的想法：这么多的包和源文件应该从哪里入手？怎么理清楚动辄十几层的函数调用和分支判断？会用React提供的接口并且掌握一些“最佳实践”不就足够了吗？源码的学习恰是一个“祛魅”的过程，在抽丝剥茧般细致的钻研和学习之后，有关React”最佳实践“的认知会更加深刻而Hooks的原理也不再神秘。

在对React整体架构有了基本认识的基础上，学习React源码最直接有效的方式就是亲自调试代码，在关键的代码调用处打断点、查看变量赋值以及函数调用栈等等。而常见的调试工具包括不限于Chrome Sources、 VS Code。根据React源码构建的位置，调试由易到难大致可以划分为三个思路：

1. 调试npm registry中的React构建产物
2. 调试本地构建的React产物
3. 调试React源码和项目代码共同构建的产物

程序员对于“源码”似乎天然保持着“敬畏”的心理，尤其是对React这样知名的开源项目心里总不能避免产生这样的想法：这么多的包和源文件应该从哪里入手？怎么理清楚动辄十几层的函数调用和分支判断？会用React提供的接口并且掌握一些“最佳实践”不就足够了吗？源码的学习恰是一个“祛魅”的过程，在抽丝剥茧般细致的钻研和学习之后，有关React”最佳实践“的认知会更加深刻而Hooks的原理也不再神秘。