一些废话
作为一个技术偏向后端、然后半路开始做一些前端的事情,另外性格比较保守的人,之前一直是用jQuery在做前端,基本上也够用,但是也有在工作中思考一些前端的东西。因为公司的技术栈已经切换为React,随着旧版本的下线,以后应该会经常和它打交道了。
因为产品的原因,jQuery开发的旧系统确实很难维护,常常改一个地方要考虑非常多的影响。原因呢,旧系统的代码的组织上比较混乱是一方面,另外就是业务逻辑很繁杂,耦合度非常高,很难扩展或复用,还有一些地方已经完全没有人记得当初为什么要这样做,以及这个逻辑究竟在干啥。所以利用老大们去重构的这段过渡时间,我也做了一些准备。
在我本意,我是不太支持使用太多工具来搞前端的,毕竟简单好用才是最棒的。但问题是目前前端的技术栈并不是太简单,最近几年有很多新事物新玩意被制造出来,又被淘汰,你根本拿不准什么时候社区就丢弃某些你所依赖的东西了,在这样一个不稳定阶段选择一个靠谱的工具是很令我这种对前端社区不太熟的人很感到焦虑的。
虽然我对社区的动向不是很熟悉,但毕竟还是写了这么久的代码,经过这些年对前端的观察和实践,其实我觉得我只需要这么一些东西即可:
- 代码压缩打包工具,这个可以节省带宽和连接数,很实用;
- 模块化、组件化、数据和视图分离的规范;
- 处理兼容性的javascript的库,jQuery啦;
其实就这几点,很简单,目前代码压缩和打包是有了的,jQuery也是必须的,那剩下的就是组件化了。实际上,我也在用组件化的思想编程,不过没有像React那样使用虚拟dom来diff更新,也没有用过模板,简单的用数组来拼接用做视图。不过在尝试了React做视图之后,确实觉得还是很方便,毕竟封装了一些需要我手写的东西,特别是jsx的写法,确实很方便。
目前还没有使用数据流什么的,因为这里是比较有争议的,有人说单向好,有人说双向好,其实我更倾向于双向数据流,业务决定技术选型嘛,再有就是做视图就专心做视图,没必要搞那么臃肿,所以我对React、以及ES的其他一些高级特性以及语法糖目前不是很感兴趣。
问题
说说遇到的几个问题:
1. 嵌套组件互相调用方法导致无限回调
这个问题是由于我为了在父子组件之间进行沟通,子组件在 render 时调用了一些 props 里设置的父组件的回调方法,然后在这个回调函数里更新 state,结果就是在render的时候,触发了子组件的 componentWillReceiveProps 方法,因为我在这里做了一些针对 props 改变时更新子组件的 state 的事情,于是构成了一个无限的回调,直至JS报错,汗~~
2. refs 的成员在未插入DOM时是不存在的
在子组件A上设置了一个ref,供父组件的方法找到它,另外有一个子组件B,会通知父组件一些事情,然后父组件让组件A来显示。我一开始只在子组件B的getInitialState计算完state初始值的时候就通知父组件,结果就是它的refs里面找不到组件A,原因是需要组件真实被插入DOM之后,才会添加ref到refs里面去,所以应该在componentDidMount的时候再去触发这个通知。以后也应该注意这个问题。
3. this.setState()
只有用this.setState设置state才会更新 render ,直接赋值是不行的。
总结
上面这些问题是因为不熟练造成的,并不是致命问题。总的来说React还是比较简单的,用着也比较顺手,效率较高,适合我们的业务。