React 入门（五）

组件的生命周期

声明一个React组件可以通过函数或者 ES6class 的形式，当使用ES6class类的时候需要继承React.Component类，并实现render()方法。
组件实例在被创建或者插入到DOM中时，提供以下方法可以调用：
1. constructor()：这是组件的构造函数，将会在组件被装配之前调用。当覆写该函数时，需要在最顶部执行super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常。
2. static getDerivedStateFromProps()：组件实例化后和接受新属性时将会调用。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态。调用this.setState() 通常不会触发 getDerivedStateFromProps()。
3. componentWillMount() / UNSAFE_componentWillMount()：在render()之前的调用方法。
4. render()：组件渲染
5. componentDidMount()：在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。若你需要从远端加载数据，这是一个适合实现网络请求的地方。在该方法里设置状态将会触发重新渲染，在这个方法中，我们可以发起订阅（如定时重绘）。
当我们调用了setState()方法进行重绘时，会执行以下方法:
1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()，在接收到新属性之前调用，我们可以在此方法中比较前后状态并执行setState()
2. static getDerivedStateFromProps()：接收到新属性时调用
3. shouldComponentUpdate()：是否需要重绘
4. componentWillUpdate() / UNSAFE_componentWillUpdate()：渲染之前调用
5. render()：组件渲染
7. getSnapshotBeforeUpdate()：在最新的渲染输出提交给DOM前将会立即调用
8. componentDidUpdate()：会在更新发生后立即被调用，可以再此处操作DOM。
当组件被移除时，会调用：
1. componentWillUnmount()：在这里我们可以删除componentDidMount中我们发起的订阅。
在渲染过程中发生错误时会被调用：
1. componentDidCatch()

React DOM

React实现了一套与浏览器无关的DOM系统，兼顾了性能和跨浏览器的兼容性，在React中，所有的DOM特性和属性（包括事件处理函数）都是小驼峰命名法命名。比如说，与HTML中的tabindex属性对应的React实现命名则是tabIndex。
style属性接受一个键为小驼峰命名法命名的javascript对象作为值。

测试用例

我们可以使用Test Renderer编写React的测试用例：

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

该包提供了一个React的渲染器，可以用来将 React 组件渲染成纯 JavaScript 对象，不需要依赖于 DOM 和原生移动环境。

本质上，该包可以在无需使用浏览器或jsdom的情况下，轻松地抓取由 React DOM 或 React Native渲染出的平台视图层次结构（类似于DOM树）,从而我们可以对Dom结构做断言。