enter image description here

这一段在用PHP和React。之前看过太多React的推介信息,貌似将之奉若神器。然而一直未有去了解它,借着此次实践中要用到,总算逮到了一个尝试机会。刚好此时「React.js Essentials」出了中文版,为了快速了解React,就很自然地选了这本薄薄的小册子。

在阅读过程中,突然间想起来一个老问题,而且貌似是不少人的困惑:“书我也看了,内容也都理解了,但实践起来还是一头雾水,懵懵懂懂的?

我以前对这个问题的回答总是说“还是实践得少,仍需要找些项目多加实践”。但就这么一句话,现在回想起来也确实过于简单了。

作为开发者,时刻都要掌握一些新技术,是再正常不过的事了。而上面这个问题却好像是每个人在学习过程中都或多或少会遇到的。如何去破解它呢?

至于问题的出现,我的理解是:

  • 首先,看书是顺着别人的思想走,所以别人娓娓道来,你也就听得头头是道。而一旦脱离了作者安排好的路,自己的陌生感就来了,变得走起来磕磕碰碰;
  • 其次,一本书看下来,知识的掌握程度是初级的,而且必然会遗漏不少知识点,因此沉淀在自己记忆中的是碎片化知识,不成体系,必然也就无从下手。

以上两点应该是主要的症结所在。好比「React.js Essentials」(这里拿它做例子),很薄,在看第三、四章样章的时候,我差不多总共才花了一个小时左右吧。整本书看下来,前后也就一周时间(每天抽点时间看看)。然而看是看完了,但我依然会遇到上面这个绕不过去的问题,特别是在Flux的内容方面。

「React.js Essentials」花了两章的份量来阐述Flux,而且还是结合着前面几章的示例进行改造,一章章连着看下来,每一段都能理解,但最终却很难将知识点有机地串接在一起。因此,估计若要在实践中运用Flux,我仍是一脸懵逼。

那怎么办呢?书是看完了,我到官网上逛了逛,看到一个React+Flux的TodoMVC的例子:flux-todomvc,但这个例子又过于复杂,估计“参透”完这个例子,效果仍跟看书差不多,几乎达不到快速梳理、串接知识点的目的。因此,我针对自己想了解的知识点,“量身打造”了一个“简化版”的Todo List例子。

要快速适应Flux,无非就是打通CRUD的各个环节,将各个环节串起来走一遍,应该也就掌握了它。再进一步思考,我的目的是了解Flux的整个处理闭环,而修改与删除操作发生之后的处理流程,跟增加操作带来数据变化后触发的流程大同小异。因此,只需聚焦一种场景,而不用重复差不多的场景,以化繁为简、突出主干。最终,将功能实现定在了AddGet操作上。

思路定下来,可以结合着书中所学,先把总体原型结构图画出来,这个跟Flux没关系,但要实现这个应用,还是省不掉的步骤。

enter image description here

实践的过程也是重新来来回回翻书、回忆的过程,如果说前面看完一遍书有了初步掌握,现在就是尽量将知识点系统化,并拾遗补缺的改进过程。最终我的整个应用结构是这样的:

enter image description here

应用效果图:

enter image description here

经过整个流程走一遍,我就对Flux的处理过程有了一个总结,以下这张图就是我实践的最终目标和成果,同时作为我后续开发中的一个最重要的参考。这样我就拥有一张“功法羊皮卷”了,相关代码可作为后续开发的样板代码

enter image description here

总结

  • 正所谓“纸上得来终觉浅,绝知此事要躬行”,光看书、按着书的套路是远远不够的。但书本的作用又是很大的。因此,要懂得“利用”书的优势——懂得如何实践书中的知识,并纳为己用。毕竟书本的知识只是“引子”,修行还得靠个人;
  • 概念验证(POC)不仅对技术框架选型很有帮助,在学习书本知识时也一样。要掌握好书本知识,就不能偷懒怕麻烦,POC还是很有必要的;
  • POC要框定好范围,要针对自己的情况“量身定做”。比如这个例子,如果需要完全可以实现一个完整的CRUD过程,甚至数据可以通过PHP提供;
  • 看书也不能迷信书本,因为随着工具的版本更新,其内容有可能变得陈旧;甚至书本的知识并非最佳用法,如何辨别,这个比较难,需要看经验、敏锐度以及搜索;另外书中也可能会遗漏一些流行概念,比如「React.js Essentials」中未涉及Redux,而我也确实暂无此方面需求;
  • 勤做记录和总结,且做出适合自己的记录和总结。我看了不少React、Flux资料,大多把概念讲得比较玄乎,图画得也很漂亮,或者对官方文档囫囵吞枣式地加以发挥,理解起来实在是感觉七绕八绕。直观、简洁的才是宝。另外,笔和纸的作用很大,务必勤用之。

在这里主要是想记录一下我在看书/学习方面的一些方式和感悟,重点不在应用的实现上。当然,每个人的学习习惯、基础积累不一,所以,找出最适应自己的方法,才是重要的啊。

顺带说说用了一段React之后的感悟,React的JSX估计太多人不喜欢了,我也没觉得优势,而且那个夭寿的Webpack配置,简直够你喝一壶。你问我用React最大的感受是嘛?我觉得就是很自然地用起了ES6。

有帮助吗?有帮助你就转起吧。

个人博客:http://www.2gua.info

知乎专栏:https://zhuanlan.zhihu.com/guagua