欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-13 17:05:10
...

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比较适合做组件开发,拥有完备的体系它的

 

 

 

相关标签: js react