react的项目我总共做了两个,并不算多。第一次做react的项目的时候对react这是略微有点了解,但是只限于了解。当时因为react+redux很火就盲目的在第一次做react项目的时候就用上redux,结果惨不忍睹。本身对react就不熟悉,redux文档看了一遍后,更是一脸懵逼,完全不知道怎么写,然后在网上找攻略,看了半天似乎看懂了,还是不知道怎么写。后来时间实在来不及,就在github上复制一位大腿的代码,把内容去掉换成自己的,但还是踩了无数个坑,加了好多班,终于算是完成了。
因为整个项目组我是第一个用react做项目的,遇到问题只能自己解决,如果不是在github上下载了别人的代码,我觉得自己是不可能按时完成任务的,它让我少走了很多弯路。写一个已经被写烂的todo demo和写一个完整的项目完全是两回事,所以我非常欣赏和感谢那些愿意分享自己代码的人,也会将自己的代码分享出来,只要能对一个人有帮助,我就心满意足了。
在做第二个项目的时候就简单很多,因为本身就比第一个项目简单,逻辑不复杂,所以在做项目的时候还研究了其他一些有帮助的东西,比如按需加载。
总体来说react+redux上手的确不容易,那种隔着state和props去操作DOM的方式让人觉得不是很舒服,尤其是redux的dispatch,action,reducer,store。。。各种概念让人眼花缭乱,无从下手。
React
react是将DOM写进js里,所谓虚拟dom其实就是在js中creactElement然后appendChild进一个标签中。在append之前对dom进行操作,所以避免了直接操作dom。而目前其他框架都是将js写进html中,至于那种方式更好,每个人都有自己的观点。其实各种框架差别并不是很大,只看自己喜欢或者适合使用哪种。
redux其实就是在react外层加了一个数据中心,用来保存react中的数据,让组件之间进行更好的互动。因为react是单向数据流,只能从上而下进行渲染,底层组件如果想要改变上级或者同级,应该触发redux改变上级的props,再次进行自上而下的渲染。这就是redux倡导的单向数据流。但是个人觉得redux一开始的时候上手比较难,推荐使用另外一个状态管理库---mobx,上手简单,而且它不自动触发react更新,省去了优化的步骤。但是目前mobx还没有很流行,也只有英文文档,遇到问题也不容易在网上找到解决方法。
react性能优化的大头是shouldComponentUpdate,利用好这个钩子可以极大减少react re render的次数。想想,如果一个父组件有很多子组件,而父组件需要让某一个子组件变化而re render的时候,所有子组件以及孙子组件曾孙子组件都会一起渲染,虽然react有很强大的diff算法,避免了没有变化部分的重新渲染,但这依然会造成很大的资源浪费。一种解决方式是用PureRenderMixin,但是PureRenderMixin这是进行浅比较,只是比较两个对象的引用地址,如果对象地址不变而内容变化,或者地址变化而内容不变,这时候就尴尬了。而immutable.js可以解决这个问题,它定义的对象不能改变,所有变化都会产生新的对象,可以用其提供的API -Immutable.is(a,b)对两个对象进行判断,只要两个对象的值是相等的,就返回true。所以在shouldComponentUpdate只需要利用===和is比较props和state,就可以判断组件是否需要更新, 而这个过程几乎是0成本。
项目中还使用了react-router按需加载和react-transform模块热替换,一个可以减小初次代码渲染大小,一个为开发提供便利,两个都很好用。
两个项目坐下来,感觉自己终于算是入门了,react的路还很长,接下来我也会继续用react开发项目,并向rn发展,在react这条不归路上,我是越走越远了。。。
附上代码地址,希望对其他人有帮助:https://github.com/bailicangdu