[JavaScript知识库]react第一课

1。setState的一些想法

除了我们常见的写法外，setState的参数还可以是一个方法

`this.setState(()=>{
            return {
              count: count + 1
            }
          },()=>{
            console.log("组件更新完毕调用");
          })`

setState，有时候是一个同步的方法，有时候是一个异步的方法
在触发了批量更新机制的时候，setState是一个异步的方法，其他的时候setState是一个异步的方法

2。批量更新

在同一个操作中，多次调用 setState ，正常情况下 React 会将这些 setState 中的更新进行合并，只执行一次更新

 `<button onClick={()=>{
          this.setState({
            nub: nub+5
          });
          console.log(this.state.nub);
          this.setState({
            nub: nub+5
          });
          console.log(this.state.nub);
          this.setState({
            nub: nub+5
          });
          console.log(this.state.nub);
      }}>nub 递增</button>`

  例如上面这个代码，初始值nub是5，打印 出来是5，5，5，然后调用了一次render，这就是所说的批量更新

3。 react生命周期回顾

****挂载阶段（mount）- 从组件初始化到生成真实DOM节点并挂载真实DOM树中：

• constructor(props) 组件初始化
• static getDerivedStateFromProps(props,state) 将 props 中内容关联到 state 中
• render 构建当前组件的虚拟DOM
• componentDidMount 组件挂载完成 - 通常在该生命周期函数，进行副作用处理

副作用处理:

1. 异步请求
2. DOM 获取

****更新阶段（update）- 从组件开始更新到修改完成真实的DOM节点：

• static getDerivedStateFromProps(props, state)
• shouldComponentUpdate(nextProps,nextState) – 判断是否更新
  return true 组件更新 || false 不在继续执行更新流程
• render()
• getSnapshotBeforeUpdate(prevProps,prevState) – 获取更新前的DOM快照,该函数执行时react已经完成了新老DOM对比，即将更新真实DOM，我们可以获取更新前的DOM，用于和更新后的DOM进行对比。该方法必须配合 componentDidUpdate 一块使用，该方法的返回值，会变成 componentDidUpdate 的 pervDOM 参数
• componentDidUpdate(prevProps,prevState,pervDOM) – 组件更新完成 处理副作用(请求)

****卸载阶段(unmount)

• 从组件准备卸载，到将组件从真实DOM中删除:

4。组件在什么情况下会更新：

1. 调用 setState 引起当前组件进行更新
2. 父组件更新，会引起子组件进行更新
3. 调用 forceUpdate 方法强制组件进行更新