生命周期
componentWillMount(即将移除)
componentWillMount()是唯一一个在render()之前调用的生命周期方法。因此是在服务端渲染中唯一被调用的方法。
因为componentWillMount()将被删除，所以官方推荐使用constructor()替代该方法
render()
- 在一个class 或者 function 组件中必须需要的
render()will not be invoked ifshouldComponentUpdate()returns false.
constructor()
constructor(props)
react的构造器是在装载之前被调用的，当构造器实现了React.Component类，你应该在任意的生命之前调用super(props)
- Otherwise,
this.propswill be undefined in the constructor, which can lead to bugs.
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);// 改变handleClick的this的上下文
}
componentDidMount()
componentDidMount()
组件安装后立即调用componentDidMount（）（插入到树中）。
当该方法被调用时候，React 已经渲染了组件并且将组件插入 DOM。因此如有有任何依赖于 DOM 的初始化，应该放在这里。
- 在componentDidMount请求异步加载的数据
有一种错觉，在componentWillMount请求的数据在render就能拿到，但其实render在willMount之后几乎是马上就被调用，根本等不到数据回来，同样需要render一次“加载中”的空数据状态，所以在didMount去取数据几乎不会产生影响。 - 在componentDidMount中添加加事件监听
react只能保证componentDidMount-componentWillUnmount成对出现，componentWillMount可以被打断或调用多次，因此无法保证事件监听能在unmount的时候被成功卸载，可能会引起内存泄露 - 该方法中可以使用
this.setState()方法，它将触发重新渲染。
componentWillReceiveProps（即将移除）
componentWillReceiveProps(nextProps)
- 当组件接收到新的props，该方法会首先被调用，但是需要注意一点，即使props并没有发生改变，该方法也会被调用，所以使用该方法的时候要确保比较this.props和nextProps，避免不必要的渲染。
componentWillReceiveProps将被移除，使用新的static getDerivedStateFromProps代替。
static getDerivedStateFromProps（新增）
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps内部不可以有副作用，因为现在是无论是state改变还是props改变，都会执行它。所以要谨慎使用。
shouldComponentUpdate
shouldComponentUpdate(nextState, nextProps)
有些时候需要避免不必要的渲染，可以使用该方法。返回false意味着 React 不执行componentWillUpdate()，render(),componentDidUpdate()。
该方法在初始化时候不执行。根据 React 文档，React 可能将shouldComponentUpdate视做提示而不是严格的根据它的返回结果决定是否执行，也就是说可能出现shouldComponentUpdate返回false，但是还是发生重新渲染。
componentWillUpdate（即将移除）
componentWillUpdate(nextProps, nextState)
该方法在被渲染前调用.shouldComponentUpdate在新的props进入组件或者state改变的时候调用。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 React 16.3 被添加并且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的所有用例。
getSnapshotBeforeUpdate在元素被渲染并写入 DOM 之前调用，这样，你在 DOM 更新前捕获 DOM 信息（例如：滚动位置）。
应该返回一个snapshot值或null，无论返回什么，shouldComponentUpdate都可以接收到snapshot参数。
如果想要获得一个 list 或者一个聊天窗口中的滚动位置，可以在getSnapshotBeforeUpdate中取到这些信息。然后将滚动信息作为snapshot值返回。这允许在更新DOM后在componentDidUpdate中设置正确的滚动位置。
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
当组件被更新时，将此作为在DOM上操作的机会。这也是一个进行网络请求的好地方，在生命周期中由于state的变化触发请求，在componentDidUpdate中进行。
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID); // 若props没有改变，网络请求可能就不需要了
}
}
componentDidUpdate()will not be invoked ifshouldComponentUpdate()returns false.
componentWillUnmount()
componentWillUnmount()
在卸载，销毁组件之前调用该方法。
static getDerivedStateFromProps(nextProps, prevState) {
4. Updating state based on props // 根据props更新state
7. Fetching external data when props change // 依赖props的数据请求
}
constructor() {
1. Initializing state // 初始化
}
componentWillMount() {
1. Initializing state // 初始化
}
componentDidMount() {
2. Fetching external data // 请求数据
3. Adding event listeners (or subscriptions) // 添加事件监听
}
componentWillReceiveProps() {
4. Updating state based on props // 根据props更新state
6. Side effects on props change
7. Fetching external data when props change // 依赖props的数据请求
}
shouldComponentUpdate() {
}
componentWillUpdate(nextProps, nextState) {
5. Invoking external callbacks
8. Reading DOM properties before an update
}
render() {
}
getSnapshotBeforeUpdate(prevProps, prevState) {
8. Reading DOM properties before an update
}
componentDidUpdate(prevProps, prevState, snapshot) {
5. Invoking external callbacks
6. Side effects on props change
}
componentWillUnmount() {
}
