一只前端萌新学习react+ts有感

99 阅读2分钟

当青训营遇上码上掘金,我在一个个给出的项目面前不禁直冒冷汗。自己惯用的框架vue2和vue3在此次的任务中均排不上用场,要求的是此前从未接触过的react和typescript——是的,我确实只是一个学习了三件套和vue2和vue3的小白,尽管对vue2和vue3都有项目经历,但是离吃透底层,熟练运用还很远。

但是,在学习react和typescript的过程中,我渐渐体会到了两者不同于vue和js的魅力。react更加贴近原生,在学习初期印象最深的莫过于在给DOM节点绑定事件时,必须保证赋给事件的是一个函数,不同于vue中可以直接 <div onclick=this.func(arg)></div>,在react中必须是 <div onClick={()=>{this.func(arg)}}></div>。还有以萌新之见,react似乎并不存在真正意义上的“双向绑定”,其实现本质上还是两条单项数据流。不过父子组件的通信实现和vue还是有所区别。typescript的繁琐也着实让我这个初学者有点烦恼,尤其是并不熟悉ReactElement、ReactNode这种不太能见名知义的接口的情况下,稍有不慎就是满眼红线……到最后恨不得把所有的类型都改成 any。

不过,终归是体会到了两者的魅力。在typescript+JEST的加持下,完成前端单元测试是一件很轻松且语义化很强的事情,并且在规定好了所有的接口、类、函数参数、关键变量的类型后,且不说多出来的语法补全让之前在随性的JS里面苦苦打字的我有多么舒服,减少了一些低级失误,关键是这样的项目在后续维护上要清晰很多,而且如果有哪些地方设计不合理,在coding的过程中就会发现(比如类型限制不合理,参数/接口设计不合理等),可以说是带来了全新的编程体验。不用说,我渐渐成为了typescript的拥趸了。