React.js 记录

概要

用了一段时间的 Reactjs，其实大部分的框架原理和 Vuejs 都很相似，包括响应式、足够轻量级、基于 Virtual-DOM 等特性。从整体上来看，Vuejs 是基于模版进行应用构建的，在中小型应用中有一定的优势。而 Reactjs 则需要我们在 JS 中使用 JSX 手动的来创建 DOM。

开始一个新的 Reactjs 项目，我们通过自动化的脚手架创建工具 create-react-app 来创建一个初始化的 Reactjs 工程。

Reactjs 本身通过计算 Virtual DOM 之间的差异（Diff）来更新 UI 组件。每当 props 或者 state 改变时，Reactjs 会重新计算生成一个 Virtual DOM 对象，并且通过比较两个 VM 对象之间的差异来找出数据改变引起对应在 UI 上的差异，最后采用最小的成本来更新 UI。 在纯函数组件（同样的数据对应同样的 UI）下，对于相同的 props 和 state，其对应的 UI 显示应该是相同的。因此，当传递给组件的 props 或者 state 的改变与之前相同时，Reactjs 可以完全省略掉此时对组件 VM 的 Diff 计算，这在某种程度上可以提高 Reactjs 组件的渲染性能。为此，Reactjs 为我们提供了扩展的插件（Addon）“PureRenderMixin” 来解决这个问题。

React是非常灵活的，但它也有一个严格的规则：

所有的React组件必须像纯函数那样使用它们的props。

组件通讯

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。

p.s. 未完成