react的学习总结

React介绍（具体总结请参考附件chm，本文的chm版本）

1. 什么是Reaact以及为什么要使用它
   

   React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。

   React不是一个mvc框架，可以说是View（不使用template的view），是单数据流（使用插件可以完成双向）,对于数据更新的响应简单的不能再简单了，用官方的话：Reactive updates are dead simple！

   可运行在node服务端和web端，是一个对于构建大规模web系统的轻量级解决方案。

   基于VirtualDom构建，可以更快，更有效的完成Dom操作；

   React实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。甚至可以在IE8中使用HTML5的事件。

   基于JSX脚本开发，通过提供的转换器可转换为JS。

   --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

   与其他框架可以很好的协同工作。

   你可以只在你的站点中部分使用它，它不会强制占有你的全部的。

   组件化的React可以使你更加方便的分割工作，组件的复用可以是大型站点代码量越来越小，维护更容易。

   快，因为DOM慢。

   批量进行虚拟DOM的读写操作以达到提高性能,在iphone的uiwebview组件中可达到60fps。

   采用顶级事件代理机制（采用夸浏览器的HTML5事件）

   React组件是低耦合高内聚的（React components are looselycoupled and highly cohesive）

2. React实践（见附件）
   

   React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。

   React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。
   React的API非常简洁且较少，主要分2个层次：顶层API以及组件API（http://reactjs.cn/react/docs/component-api.html）：http://reactjs.cn/react/docs/top-level-api.html

   注意区分React的虚拟DOM术语，非常重要：http://reactjs.cn/react/docs/glossary.html

   需要知道的四个点：

   1：组件的生命周期

   组件的生命周期包含三个主要部分：

   • 挂载： 组件被插入到DOM中。
   • 更新： 组件被重新渲染，查明DOM是否应该刷新。
   • 移除： 组件从DOM中移除。
     
     具体总结请参考附件chm，本文的chm版本
   2：事件机制
   React采用的是顶层的事件代理机制，更高效。
   React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性
   3：JSX的陷阱
   JSX的标签必须是闭合的
   JXS中不能使用IF-Else
   确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
   如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 或者aria前缀。
   4：State 状态机
   State应该使用的场景：大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。
   State 应该包括的数据：那些可能被组件的事件处理器改变并触发用户界面更新的数据
   State不应该包括的数据：计算所得数据，React 组件，基于 props 的重复数据
   
   
3. react的工作流程
   
   
   
    
4. react的适用场景
   个人观点：
   由于react体积还是算比较大的，未压缩版本：585KB，压缩后118KB，其额外功能插件未压缩版644KB，压缩后版本是129KB。
   在国内的国情下，个人认为其更适合大型的PC复杂站点，可以达到组件重用，后期便于代码维护，并且对于后续完成一个功能会代码量比较少。
5. 基于react搭建全流程自动化(http://segmentfault.com/a/1190000002552008)
   模块化工具：webpack（RequireJS）及其丰富的插件实现hot
   流程化工具：gulp/grunt
   规范化工具：jslint插件
6. 你需要知道的一些React的规范亦或是坑
   1：React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
   2：使用了getInitialState 就要return内容回来，不然不会执行render。
   3：DOM中设置style要使用object 在 React 中，行内样式并不是以字符串的形式出现，而是通过一个特定的样式对象来指定。在这个对象中，key 值是用驼峰形式表示的样式名，而其对应的值则是样式值，通常来说这个值是个字符串另外浏览器前缀除了ms以外 首字母应该大写
   4：input标签默认不支持change