@Deot 周荣德

项目地址： http://github.com/deot/react

Thinking in React

1. Javascript 预处理 编译： coffeescript , typescript ， React JSX ， ES6… 模块化： CommonJS ， AMD ,UMD ….

2. CSS 预处理 编译： SCSS ， LESS 辅助： Autoprefixer ， Compass 　

4. 实时刷新，数据模拟（ API 接口），域名代理… .

３ . 文件处理 开发： src 目录 压缩： dist 目录

前端工程化

React 介绍

1. React.js2. ReactRenders: ReactDOM / ReactServer / ReactCanvas3. Flux 模式及其实现（ Redux , Fluxxor ）4. React 开源组件5. React Native6. GraphQl + Relay

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自： React 官方网站 狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括：

任何技术都是一样，技术本身的核心不会太复杂，但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身，而是学习这套开发体系，整个技术栈。

学习整个栈，能够写 web, node 直出（服务端渲染），以及 native ，能够适应各种纷繁复杂的业务。React 同构

• 仅 Web ：轻量快捷的，直接可以用 Reactjs ；• Node 直出：提升首屏时间的，可以结合 React Server Render ；• 客服端：更好的性能的，可以上 React Native 。

“ 一次编写，多处运行”

ES6(7) ， JSX 语法，组件式开发写一个简单的组件：

状态机 “ 抛弃繁琐的 DOM 操作，仅需维护数据的状态”

高性能： Virtual Dom Virtual Dom （下称 vd ）算是 React 的一个重大的特色，因为Facebook 宣称由于 vd 的帮助， React 能够达到很好的性能。是的， Facebook 说的没错，但只说了一半，它说漏的一半是：“除非你能正确的采用一系列优化手段”。

通过 ReactDom.render 将 ReactElement 渲染成常规的 DOM

React 渲染过程

React 渲染优化shouldComponentUpdate ：是否需要更新，对比前后数据

• 利用 immutable.js 设计一个 pureRenderDerator （已设计），更加深层次的对比；• Immutable.js 在后期使用数据层（ redux ）中的 reducer 有很明显提升效率的作用

单向数据流 VS 双向绑定1. 单向数据流 （ React （快） ， BackBone （繁琐）） 数据流动方向可以跟踪，流动单一，追查问题的时候可以跟快捷。缺点就是写起来不太方便，要使 UI 发生变更就必须创建各种 action 来维护对应的 state；后期介绍利用 Redux 统一管理数据；2. 双向绑定（ Angular ， Vue ） 值和 UI双绑定，这种好处写起来比较方便。但是由于各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，子组件修改父组件，兄弟组件互相修改有有违设计原则。

Redux 的流程结构“ 数据统一管理”

React 官方文档在 Advanced Performanec 这一节，这样写道：对 React 期待

One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React version

显然 React 自己也其实只是想尽量达到跟非 React版本相若的性能。 React 在减少重复渲染方面确实是有一套独特的处理办法，那就是虚拟DOM ，但显示在首次渲染的时候 React绝无可能超越原生的速度，不一定能将其它的框架比下去。因此，我们在做优化的时候，可的期待的东西有：• 首屏时间可能会比较原生的慢一些，但可以尝试用 React Server

Render (又称 Isomorphic)去提高效率• 用户进行交互的时候，有可能会比原生的响应快一些，前提是你做了一些优化避免了浪费性能的重复渲染（ immutable ， pureRender ）。

“纸上得来终觉浅，绝知此事要躬行”需要学习的相关知识1. JavaScript深入浅出（es5原型）2. JavaScript 原型系统的变迁，以及 ES6 class

3. React入门教程4. Redux 核心概念5. 搭建你的工程目录6. 学习react-router

7. 熟悉官方 redux 案例8. 参考我给微商系统做的项目实列以及相关规范