为什么是 React

用于构建用户界面的 JavaScript 库

源自 Facebook

React 能做什么

learn once, write anywhere

为什么是 Facebook

运行时间长，维护的工程师换了一批又一批

Climb The Shit Mountain

Move Fast

菜鸟养成营

新兵蛋子，上前线改 Bug，开发新 Feature

前端代码不会随着时间消逝而快速腐烂

简单

用 JSX 语法取代 HTML 模板，在 JavaScript 里声明式地描述 UI

虚拟 DOM 取代物理 DOM 作为操作对象

封装了 DOM 的事件系统

单向数据流动

组件和基于组件的设计流程

ReactDOM.render()

JSX 语法

HTML 标签（以 '<' 开头） ➜ HTML

JS 代码块（以 '{' 开头） ➜ JavaScript

组件

所谓组件，就是状态机器。

React 将用户界面看做简单的状态机器。

render: function() { }

pure function

获取真实的DOM节点

组件并不是真实的 DOM 节点

this.refs.[refName]

this.state

this.setState()

UI =     f(state)

UI = render(state)

组件的详细说明和生命周期

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

组件化的开发思路

UI

UI

重新思考 UI

MVC

技术 ➜ 表现，数据，控制

React

功能 ➜ UI

- Details

 - Header

 - Story

 - Poster

 - CommentBox

  - CommentList

  - CommentForm

coding

?

高性能虚拟 DOM？

JSX？

封装过的事件机制？

调试机制？

Kiss

Keep it simple & stupid（大道至简）

将来

react-router

Redux

CSS in JS

Immutable-js

Webpack

Pepper