React18原理: 生命周期中特别注意事项

概述

• 生命周期就是一个组件从诞生到销毁的全过程(包含错误捕获，这里暂且不聊这个)
• react 在组件的生命周期中注册了一系列的钩子函数
• 支持开发者在其中嵌入代码，并在适当的时机运行
• 生命周期本质上就是组件中的钩子函数，主要有三个主要的钩子
  • 挂载
  • 更新
  • 卸载

首次挂载

• 1 ）初始化 constructor

  • 同一个类组件对象只会运行一次
  • 所以经常来做一些初始化的操作
  • 同一个组件对象被多次创建，它们的 constructor 互不干扰
  • 注意
    • 在 constructor 中尽量避免(禁止) 使用 setState
    • setState会造成页面的重新渲染
    • 但是在 初始化 阶段，页面都还没有将真实dom挂载到页面上，是没有任何重新渲染的意义的
    • 除异步情况，比如 setInterval 中使用 setState 是没问题的，
    • 因为在执行的时候页面早已渲染完成，但也最好不要使用，容易引起奇怪的问题，参考

      constructor(props) {
               
               
        super(props);
        this.state = {
               
               
          num: 1
        }
      
        // 不可以，直接warning
        this.setState({
               
               
          num: this.state.num + 1
        });
      
        // 可以使用，但不建议
        setInterval(() => {
               
               
          this.setState({
               
               
            num: this