有可能提高10倍效率的前端学习方法

“看懂代码！？”

这句话表达的意思，不简单！！

1、看懂代码的字面意思，em。。。是英文单词的意思吗？大概可能是，因为确实有关联。

一般代码的变量、方法、类名，都是有一定的规范。各个框架也是遵守命名规范，便于大家理解，做到见名知意。

2、做到上面一步，才是初步推测代码表达的意思。但是代码的本身逻辑，数据怎么输入输出，形象地说，数据像水流，怎么流入到流出的。这非常关键。因为代码结构，保证了规范性。但真正读懂代码，得可能跨越结构的关系，将各个【流入、流出】点给【联结】起来。

成为像手链一样的玩意。像不断流的水流。这程序才能跑得通，没有bug。至于是不是水流分支流出地方了，也是可以通过链条追溯本源的。

我觉得能搞明白这一步，才算是看懂了代码。了解了基本逻辑，业务逻辑也能用代码实现。

ok！道理大家可能都懂！但是，看着天书的代码，崩溃啊。特别是学一些新的框架，技术，看源码，更加头大。10分钟不到，就蒙蔽了。脑壳内存不够，当场宕机。打击学习信心，效率非常低效。

既然明白了【看懂代码】的底层逻辑，应用在学新的技术栈时，是不是要改变一下学习方式，或者用一些学习工具来，实现其应用呢？

我想的是方法是：给代码标记序号，1-100-n

这或许让人非常无语，幼稚。但这恰恰表面上符合了【看懂代码】的原理。因为有这条链条在，你的学习方向已经有了源头，虽然目的地依然模糊，但起码有了“一步一个脚印”的积累，你说呢？

程序本来就是一条一条指令地执行，现在你可视化这些步骤，跟画脑图，流程图，非常相似。

# 小案例：

这图就是简单的搞定了setState这个react三大属性之一state的设置方法的数据流动顺序！

复习起来，一眼就能明白程序执行的顺序，也就能够知道在何处调用数据，赋值变量，改变什么等等的操作。才能应用所学！

好家伙！QQ截图，就有这个标记功能，非常方便。

特别对于，学习标准化，程序化的技能，很有帮助，高效！

程序的本质是通过数据流动，实现信息传递，实现功能，就这样！