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

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