@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 接口),域名代理… .
3 . 文件 理处
:开发 src 目录
:压缩 dist 目录
前端工程化
React 介绍
1. React.js
2. ReactRenders: ReactDOM / ReactServer / ReactCanvas
3. Flux 模式及其 (实现 Redux , Fluxxor )
4. React 源 件开 组
5. React Native
6. 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