Thinking in React by Deot

Thinking in React by Deot

• 1.
  @Deot 周 德荣 目地址：项http://github.com/deot/react Thinking in React
• 2.
  1. Javascript 理预处 ：编译coffeescript , typescript ， React JSX ， ES6… 模 化：块 CommonJS ， AMD ,UMD …. 2. CSS 理预处 ：编译 SCSS ， LESS 助：辅 Autoprefixer ， Compass 　 4. 刷新，数据模 （实时 拟 API 接口），域名代理… . ３ . 文件 理处 ：开发 src 目录 ：压缩 dist 目录 前端工程化
• 3.
  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 本身， 而是学 套 体系，整个技 。习这 开发 术栈
• 4.
  学 整个 ，能写习 栈 够 web, node 直出（服 端 染），以及务 渲 native ，能 适 各 繁够 应 种纷 的 。复杂 业务 React 同构 • 仅 Web ： 量快捷的，直接可以用轻 Reactjs ； • Node 直出：提升首屏 的，可以 合时间 结 React Server Render ； • 客服端：更好的性能的，可以上 React Native 。 “ 一次 写，多 行”编 处运
• 5.
  ES6(7) ， JSX法， 件式语 组 开发 写一个 的 件：简单 组
• 6.
  状 机态 “抛弃繁 的琐 DOM 操作， 需 数据的状 ”仅 维护 态
• 7.
  高性能： Virtual Dom VirtualDom （下称 vd ）算是 React 的一个重大的特色，因为 Facebook 宣称由于 vd 的帮助， React 能 到很好的性能。是够达 的， Facebook 的没 ，但只 了一半，它 漏的一半是：“除非你能正说 错 说 说 确 的采用一系列 化手段”。优 通过 ReactDom.render 将 ReactElement 染成常 的渲 规 DOM
• 8.
  React 染 程渲过
• 9.
  React 染 化渲优 shouldComponentUpdate ：是否需要更新， 比前后数据对 • 利用 immutable.js 一个设计 pureRenderDerator （已 ），更加深 次的 比；设计 层 对 • Immutable.js 在后期使用数据 （层 redux ）中的 reducer 有很明 提升效率的作用显
• 10.
  向数据流单 VS 双向定绑 1. 向数据流 （单 React （快） ， BackBone （繁 ））琐 数据流 方向可以跟踪，流 一，追 的 候可以跟快捷。缺点就是动 动单 查问题 时 写起来不太方便，要使 UI 生 更就必 建各发 变 须创 种 action 来 的维护对应 state ； 后期介 利用绍 Redux 一管理数据；统 2. 双向 定（绑 Angular ， Vue ） 和值 UI 双 定， 好 写起来比 方便。但是由于各 数据相互依 相绑 这种 处 较 种 赖 互 定， 致数据 的源 以被跟踪到，子 件修改父 件，兄弟 件互相绑 导 问题 头难 组 组 组 修改有有 原 。违设计 则
• 11.
  Redux 的流程结构 “数据 一管理”统
• 12.
  React 官方文档在 AdvancedPerformanec 一 ， 写道：这 节 这样 对 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 ）。
• 13.
  “ 上得来 浅，知此事要躬行”纸 终觉 绝 需要学 的相 知习 关 识 1. JavaScript深入浅出（es5原型） 2. JavaScript 原型系 的 ，以及统 变迁 ES6 class 3. React入 教程门 4. Redux 核心概念 5. 搭建 的工程目你 录 6. 学习react-router