React 基础一：JSX、Babel、单项数据流和脚手架

这些内容是我学习 《fullstack-react-book》 一书，自己翻译整理出来的要点。

JSX

1. react 是用一种假冒的 DOM（它表示用来组成网页页面的 HTML 树）结构来创立 app 的，react 称之为虚拟 DOM。

2. react 中的 JSX 语法仅仅是允许我们在使用 JavaScript 时可以来描述 HTML ，本意是为了让代码看起来更加的像原生 HTML。但请记住 JSX 事实上会被编译成 JavaScript。

3. 在 JSX 中，我们不能使用 class 关键字来为一个元素申明样式类，但 react 允许我们用 className 这个关键字来为一个元素写样式类名。

4. JSX 的属性值，必须以大括号或单引号进行界定。对于字符串来说，我们使用单引号进行界定。如果，属性值比较重要或者是个变量的话，我们使用大括号进行界定。

Babel

1. Babel 一个非常有用的特性就是它能理解 JSX 。

2. 我们使用以下代码告诉浏览器 JS 引擎，我们使用 Babel 来编译和运行我们的 JavaScript 代码：

   1. 首先，引入 babel 插件： <script src="vendor/babel-core-5.8.25.js"></script>。
   2. 其次，告诉 JavaScript 执行器，我们写的代码需要用 babel 进行编译：<script type="text/babel" src="./app.js"></script>。

one-way data flow——单向数据流

1. 含义：数据的任何改动，将从 app 的顶部，向下扩展扩散到它的各个组件中。

合理的空白“脚手架”——“假”的 state

1. 当 ReactDOM.render() 在执行的时候，会递归渲染所有子组件。

2. 当组件 A 有个子组件 B ，react 会根据 state 的状态来决定是否渲染它里面的子组件 B 的时候。在组件 A 发起 ajax 到响应成功后更新 state 这段时间内，子组件 B 及其后面的组件都不会被渲染。如果用户的网速过慢，给用户的直观感受就是先看到一个空白页面，然后再陆陆续续跳出了很多块内容，而并不是加载出来的，这种体验不太好。

3. 如果，我们对 state ，一开始就给了一个假值时，那么所有组件都会被渲染出来，只是数据可能不是正确的。然后所有组件内部的 ajax 都会并行发起 ajax ，这时完整数据的页面的显示会更快一点。给用户的感觉就是先看到了一个有假值页面，但页面的样式这些都已经渲染完成，过一会儿后，页面真实的数据就会刷新出来，而并不是内容一块一块跳出来！

4. 如果用时间轴来总结的话，基本如下：

   1. 用户体验不太好的情况：ajaxA -> ajaxB -> ... -> ajaxN -> 完整页面；

   2. 用户体验比较好的情况：

      ajaxA 
          -> ajaxB     //完整页面，只是数据不对
          -> ajaxC
          -> ...
          -> ajaxN