`

《React:引领未来的用户界面开发框架》简读

    博客分类:
  • js
阅读更多

React是什么

React是Facebook公司的一个前端框架,旨在代替后端如php渲染页面。它本质上是一个状态机,只关心两件事:

  1. 更新DOM
  2. 相应事件

虽然称为框架,但是它只处理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比较适合做组件开发,拥有完备的体系它的

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics