《React:引领未来的用户界面开发框架》简读
React是什么
React是Facebook公司的一个前端框架,旨在代替后端如php渲染页面。它本质上是一个状态机,只关心两件事:
- 更新DOM
- 相应事件
虽然称为框架,但是它只处理mvc中的v,其他的譬如路由,数据处理,连ajax都没有,所以从某种意义上讲它可以很好的融入到其他框架中。
React非常注重效率,它的高效在于它的所有的状态改变先更新虚拟dom,再用它牛x的算法比较虚拟dom与现在dom区别,对比完区别再去最小化改变现有dom使得页面重绘最小化,最迅速。
这样说不知道清楚没有!或者从现有的缺点讲,现有的一次操作触发界面更新,但是这个更新又触发了另个更新,使得整个一个操作导致处理了很多次dom变化,整个过程就会很长。但是react它将几次变化合为一次,甚至将几次中间态变化都省略了直接变到终态,所以提升了效率。
还一个提高性能的特性是它具有一个事件处理器。(这个会提升性能?处理堆栈频换的原因?)
为什么使用它
简单讲就是两点,简化开发,使得前端人员在处理复杂业务逻辑和构建复杂页面时非常简便,就像php那样简单;并且,它的效率很高,大大提升了以往界面的渲染效率使得用户体验很好。所以react基于开发者简便、用户体验好两个出发点去构建框架必然将像php一样流行。
本书的看法
从整体看,本书从粗浅入门,到进阶,再到实战开发可以说是深入浅出讲得非常详细,既是开发入门不二之选又是深入探究的良书宝典。
第3章节:生命周期
- 实例化
- 存在期
- 销毁
三个周期,跟spring的bean的生命周期挺像。每个生命周期阶段都提供钩子函数供使用。
第10章节:动画
三种方式去实现动画,一、使用css3的transition,二、requestAnimationFrame来实现间隔渲染,三、使用setTimeout来实现间隔渲染。
10.1 css3的方式
在处理重绘时,react给组件添加4个class:xx-enter,xx-enter-active,xx-leave,xx-leave-active,当组件进入和退出时它会自动给组件添加4个class。
enter和enter-active的区别在于,前者是添加到渐变组件时就赋予的,后者是下一轮渲染时赋予的,这样就定义了渐变开始时的样式,结束时的样式及如何进行渐变的。
10.2 requestAnimationFrame间隔渲染
在给css之外如给canvas或滚动条位置添加动画时,间隔渲染符合我们的需求。
所谓间隔渲染就是像放电影一样将一段动画切分成不同阶段,各个阶段渲染各自的组件,所有的阶段串起来就成了连续的动画了。
10.3 setTimeout间隔渲染
原理跟requestAnimationFrame一样,只是使用的setTimeout做间隔处理。且这种方式浏览器支持比较好。
第11章节:开发工具
本章介绍两款开发工具bowserify和webpack用于打包等一系列复杂的步骤,用过node的同学或许比较熟悉,类似的工具还有很多譬如grunt、gulp。
安装就省略了就是使用npm的install安装,打包的时候使用npm run build
browserify
配置文件
scripts: { build: 'browserify --debug index.js>bundle.js' build-dist: 'NODE_ENV=production browserify index.js|uglifyjs -m > bundle.min.js' }分别配置了build和build-dist命令
里面介绍了一个组件watchify,使用了干嘛的?上面介绍打包组件和命令或者你实际开发时你是否有这样的疑问:每次修改完我得打个命令(npm run build)去重新编译下,是不是有点麻烦啊。那么现在可以使用watchify来解决这个问题,它主要是监听修改来自动执行build编译命令。
webpack
它除了像browserify那样可以编译打包,还可以处理less,jax,分包,热替换模块,支持异步加载等,所以webpack的能力比较综合。
调试
使用chrome安装react的插件可以看到react的组件、props及state
总结:
从我的经验来说,react比较适合做组件开发,拥有完备的体系它的