纸上谈来终觉浅 绝知此事要躬行
以往林林总总看了不少react文章，总觉食之无味弃之可惜，望梅止渴，纸上谈兵，纵千行万行不及一行console.log
我摊牌了，前些时间跟着崔学社一周学完了非常简易版的react，从此有了很多console.log
但是我不想讲具体的代码，而是用故事的方式讲述一个聪明的和尚的懒惰
庙里的事
从前有座山，山里有个庙，庙里有个老和尚和小和尚，小和尚酷爱偷懒但也尊师重教，言听计从，庙门有颗DOM树
，奇妙的是树上结着各种各样的果实，每个不同的果实代表着不同的节点（type）不尽相同的形状（prosp）分支上的养分由节点的把控（children），如果山治梦想是All blue，那这就算是All green也不为过
小和尚每天的除了日常的吃斋诵经外，还有一个非常重要的事就是照料这个DOM树，但每天的诵经任务很重，只有有限的时间去检查果实的情况，坏掉的果实要摘除（删除节点），对正常果实催熟，要为每个果实不同程度的处理步骤，这在这颗树尚且不大的时候，照料后还有时间去后山玩耍，可是随着树的成长，小和尚纵使三头六臂也无法在有限的时间内照料好这棵树，这让小和尚甚是苦恼
今日事明日毕
小和尚灵光一闪，何必每次都累死累活，我又不是活不过今天了。但是每次处理过的肯定是不能处理了，要不然我成老和尚了也干不完，但是如何进行新的工作规划呢
- 如何确定我昨天做到了哪里
- 我处理到什么时候才能去后山玩
那就这样吧
- 做个梯子吧，每次爬树也挺费劲的，这样就知道昨天干到哪了，到底是高等生物，知道假手于工具
- 每处理一个节点我就停下把梯子调整到下一节点，听下晚钟是否敲响，如果响了那就光速下班，梯子放在原位，明天无脑上去接着干准没错，如果没响就继续下一个，干完就把梯子撤下来，明天就知道昨天活干完了
代码呼之欲出
某一天如果把整颗标记好了就新增最后一个步骤催熟，为什么不边处理边催熟呢，因为第一个处理的果实和后面的果实有很长的时间差，果实最终成熟度不一样，老和尚一眼就看出来了
树上落着各种各样的鸟
当然不是每个鸟叫都需理会，只有一种鸟，让小和尚不得不立刻行动起来，这是小和尚养的一群鸟名为useState，还好小和尚精通鸟语，不然🍒生虫或有异变都全然不知。
闻鸟起舞（useState）
这个树很特殊，有一些子枝节经常发生变化，小则树叶盖住了果实影响晒太阳，大则易病体质附体，针对这些子树，小和尚早有计划，把鸟安置到每个树的子节点上，小和尚记住这个子树的位置，小和尚就搬出他的梯子精准上树，子树开始的位置依次处理，但是处理这个子树就可以了，把旁边的子树也检查纯属浪费时间。小和尚如何精准上树的呢？原来第一次上树安置鸟的时候，鸟记住了这个子树的位置，只要鸟叫的时候用鸟语说出来，小和尚就心领神会了。
别动我的果实（useEffect）
这只鸟不负责提醒小和尚，每只鸟都有自己独爱的几种果实，每当小和尚决定要更新这个被useEffect相中的果实的时候，这只鸟就会叽叽喳喳一番。除此之外在小和尚第一次催熟（挂载节点）的时候也会做出反应。
树上会有很多奇奇怪怪行为的鸟
只需把各种行为的鸟记录在果实旁边，等下次统一催熟的时候就可以抑或在各种处理时机对这些规则进行各种各样的处理，让我惊艳的是各种模块内全局变量的使用，尤其是函数式组件在执行之前可以把当前函数节点声明到全局，执行函数获取新的子树，那么子树就可以随时随地获取到当前的函数节点，函数节点不是真正的果实，相当于每个子树的信箱，信箱里以此塞满了各种各样鸟的行为。
[github直通车](inkstone-pool/happy-react: happy-react (github.com))
原文链接：https://juejin.cn/post/7326816030041325622 作者：紫薯怪兽
