【React】四、State & 生命周期

1.通过以下五步将 Clock 的函数组件转成 class 组件：

1. 创建一个同名的 ES6 class，并且继承于 React.Component。
2. 添加一个空的 render() 方法。
3. 将函数体移动到 render() 方法之中。
4. 在 render() 方法中使用 this.props 替换 props。
5. 删除剩余的空函数声明。
6. 为了使用state来动态改变组件的值，我们需要在类的constructor函数中接收props，并为state赋值

constructor(props) {
    super(props)
    this.state = {date: new Date()}
}

3. 组件render函数中引用state使用this.state获取
4. 当组件被挂载（渲染到DOM）会执行componentDidMount函数，当组件被卸载会执行componentWillUnmount函数，可以在这两个函数中实现自己的逻辑代码
   让我们来快速概括一下发生了什么和这些方法的调用顺序：

当组件被传给 ReactDOM.render()的时候，React 会调用组件的构造函数。组件可以使用一个对象来初始化 this.state。我们就可以在之后更新 state。
之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来渲染输出。
当组件的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
一旦组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法。

正确使用State：

1. 不要直接修改 State
2. 应该使用 setState()：this.setState({comment: 'Hello'});
3. 构造函数是唯一可以给 this.state 赋值的地方
4. 出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
5. 可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

6. 当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。
7. 数据是向下流动的，不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。