读完时间：未完待续（截止 8/31 进度 20%）
出版时间：2017 年 4 月 28 日
1.2 增加一个新的 React 组件
在使用 JSX 的范围内必须要有 React。也就是说，在使用 JSX 的代码文件中，即使代码中并没有直接使用 React，也一定要导入这个 React，这是因为 JSX 最终会被转译成依赖于 React 的表达式。
1.2.2 JSX 是进步还是倒退
我们在 JSX 中看到一个组件使用了 onClick，但并没有产生直接使用 onclick（注意是 onclick 不是 onClick）的 HTML，而是使用了事件委托(event delegation)的方式处理点击事件，无论有多少个 onClick 出现，其实最后都只在 DOM 树上添加了一个事件处理函数，挂在最顶层的 DOM 节点上。所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数，使用事件委托的性能当然要比为每个 onClick 都挂载一个事件处理函数要高。
因为 React 控制了组件的生命周期，在 unmount 的时候自然能够清除相关的所有事件处理函数，内存泄露也不再是一个问题。
2.1 易于维护组件的设计要素
作为软件设计的通则，组件的划分要满足高内聚(High Cohesion)和低耦合(Low Coupling)的原则。
2.2.3 prop 和 state 的对比
React 组件扮演的是 render 函数的角色，应该是一个没有副作用的纯函数。修改 props 的值，是一个副作用，组件应该避免。
2.3.1 装载过程
我们先来看装载过程，当组件第一次被渲染的时候，依次调用的函数是如下这些：
- constructor
- getInitialState
- getDefaultProps
- componentWillMount
- render
- componentDidMount
另一种bind函数的方式，类似下面的语句：

this.foo = ::this.foo;
等同于下面的语句：
this.foo = this.foo.bind(this);
这里所使用的两个冒号的 ：： 操作符叫做 bind 操作符。
render 函数应该是一个纯函数，完全根据 this.state 和 this.props 来决定返回的结果，而且不要产生任何副作用。在 render 函数中去调用 this.setState 毫无疑问是错误的，因为一个纯函数不应该引起状态的改变。
在装载过程中，componentWillMount 会在调用 render 函数之前被调用，component-DidMount 会在调用 render 函数之后被调用，这两个函数就像是 render 函数的前哨和后卫，一前一后，把 render 函数夹住，正好分别做 render 前后必要的工作。
2.3.2 更新过程
在 JSX 用直接把匿名函数赋值给 onClick 的方法，看起来非常简洁而且方便，其实并不是值得提倡的方法。因为每次渲染都会创造一个新的匿名方法对象，而且有可能引发子组件不必要的重新渲染。
3.1.1 MVC 框架的缺陷
MVC 框架是业界广泛接受的一种前端应用框架类型，这种框架把应用分为三个部分：
- Model（模型）负责管理数据，大部分业务逻辑也应该放在Model中；
- View（视图）负责渲染用户界面，应该避免在 View 中涉及业务逻辑；
- Controller（控制器）负责接受用户输入，根据用户输入调用对应的Model部分逻辑，把产生的数据结果交给View部分，让 View 渲染出必要的输出。
