初探 ReactJS

在Youtube上看了一个名为 [Getting Started with React.js](https://www.youtube.com/watch?v=8HkVHbJZeWY) 的视频。 The DOM is EXPENSIVE to update. Virtual DOM is a lightweight DOM representation. Virtual DOM defines pure render function: f(d) = v f(d') = v' diff(d, d') = changes diff(d', d) = undo 由于 React.js 实现了高效的 diff 算法，使得 Virtual DOM 的更新最终被反映到对应的 DOM 节点上，所以性能上的损失并不明显。 Virtual DOM 支持 State 和 Props 两种概念。props 是 immutable 的，从 Parent component 传入的属性，例如 `className` 或是 `isExpanded`。state 是内部状态，从不对外暴露，在设计的时候应当尽量 minimum。state 是由 common ancestor 来管理的。 最基本的例子，在 id 为 "example" 的页面元素内添加一个 virtual DOM `

`。 // JavaScript React.renderComponent( React.DOM.h1(null, 'Hello world!'), document.getElementById('example') ); // JSX React.renderComponent(

Hello world!

, document.getElementById('example') ); // Live script react.render-component do h1 null 'Hello world!' document.get-element-by-id 'example' React 中的 component 具有以下的 lifecycle： + `componentWillMount()` + `componentDidMount()` + `componentWillReceiveProps(object nextProps)` + `shouldComponentUpdate(object nextProps, object nextState)` + `componentWillUpdate(object nextProps, object nextState)` + `componentDidUpdate(object prevProps, object prevState)` + `componentWillUmount()` Data flow between components 主要参考 FLUX 的单向绑定数据流。 1. From parent to child via props, like one-way data binding. 2. Pass callbacks for interactions that modify parent state, like two-way data binding. 3. Synthetic event system