react 18 生命周期

生命周期 生命周期（组件从诞生到销毁的全过程）本质上就是组件中的函数钩子。 主要有三个hooks：挂载，更新，卸载。

• 首次挂载
  • 初始化constructor：同一个类组件对象只执行一次；不可以在此时setState，因为页面还没有挂载真实组件，除了异步情况下（例如setInteral中使用setState）。
  • 获取最新的属性和状态：static getDerivedStateFromProps。取代了之前的componentWillMount 和 componentWilllREceiveProps。 这是一个静态方法，所以拿不到this，因此也不可以调用setState。 该方法在挂载和更新阶段都会运行，有两个参数代表最新的状态和属性值。 返回值如果是object，则会合并掉当前的状态值。（不常用）
  • 创建vDom render：生成虚拟节点dom树 重新渲染都会调用render；同样也禁止使用setState，会造成无限递归导致爆栈。
  • componenntDidMount：挂载到页面渲染成真实dom 该方法只会在首次渲染时执行。执行完该钩子之后，组件正式进入到活跃状态。 一般做一些异步操作：开启定时器，发起网络请求，获取真实dom等。 在这里可以大胆使用setSate，因为真实dom已经渲染完毕。
• 更新阶段
  • getDerivedStateFromProps，获取最新的属性和状态。
  • shouldComponentUpdate：是否重新渲染 该方法有两个参数：nextState，nextProps，表示更新后的属性和状态，决定是否重新渲染。 react提供了一个基础班的优化组件PureComponent，是一个hoc高阶组件，内部已经使用scu做了浅比较，一次如果组件继承了PureComponent，就不用scu进行判断了。
  • render：渲染vDom
  • getSnapShotBeforeUpdate：该函数在render之后，真实dom已经构建完成，但还没有渲染到页面中。 相当于更新前的快照，可以做一些附加的dom操作，比如对某个元素的真实class做一些事情。 参数：prevState,prevProps，返回snapShot，作为componentDidUpdate的第三个参数
  • comPonentDidUpdate：更新后挂载生成真实dom 通常也会用该方法操作真实dom 参数：prevProps, prevState, snapshot
• 卸载阶段：
  • componentWillUnMount 卸载阶段唯一方法：做一些clear工作
• 关于render
  • render()：返回一个JSX表达式，生成的是一个虚拟dom，而不是直接操作的dom，展示了在内存中的ui结构。
    • 虚拟dom是react的一种优化机制。不论是类组件还是函数组件，在react中使用JSX语法时，就会形成虚拟dom。
    • 状态更新：类组件 this.state., setState({});  函数组件：const [state, setState] = useState(true)；
      useEffect(()=>{//执行组件挂载，更新，卸载时的副作用},[//依赖数组，更新变化时执行副作用函数])
  • RactDom.render()：真实的dom渲染。dom的更新是将渲染的虚拟dom与原来的版本比较（差异比较diffing机制），找出需要更新的部分，ReactDom.render()只更新这一部分。