React Hooks快照的理解

1.类组件

在类组件中，通过state对象维护组件的状态，可以通过this.state来访问状态值。

class Text extends React.Component {
  state = {
    type: 'H1'
  }
  
  render(){
    return (
     <p>Text type: {this.state.type}</p>
    )
  }
}

虽然组件在初始化时可以设置其状态，更新状态时，类组件通过使用this.setState()更改其内部状态，。每次状态发生变化，React 调用render()来重新渲染该组件，这样可以快速有效地更新你的应用UI。

也就是说，const并不是完全得无法更改，使用const声明的对象，可以改变其内部属性。

React类组件状态更新时，使用的是状态合并，并非状态替换。

• 如果组件的新状态取决于之前的状态，则使用setState的函数方法，
• 其他情况下使用对象方法。

2.函数组件

React函数组件其实充当了类组件中render的那一部分。因为函数组件无法维护自身状态，因此通过useState钩子函数让他有这个功能，当setState的时候会使得整个函数组件重新调用。

2.1 快照

快照只出现在了React函数组件中。快照官方解释：React Hooks会在发生rerender之前记录本次环境中的state以及props。因为拥有记录的能力，所以就称为了快照。也就是说，每次rerender的时候，我们能够拿到之前的N个快照。

2.2 快照形成的原因

因为useState本质实现的时候也是使用了闭包的语法。因为他形成了闭包，因为setState使用着他上层作用域中的变量，所以说即使useState调用完了，那么变量还是被使用着，所以说没有去进行垃圾回收。因此它就有了快照的这样一个概念。

2.3 快照说明

因为有了快照的这个概念，所以说，声明的事件处理函数，effect、定时器他们只能取到定义【调用】这些函数那次的快照。