单组件

1、react18.3 单组件

  import { useEffect, useState } from 'react'
  
  export default function Son() {
      const [loginData, setLoginData] = useState(0)
      useEffect(() => {
          console.log('加载完成，请求数据')
          // 请求接口，使用回调函数设置值
          setInterval(() => {
              // 使用下面异步，别用setLoginData(data)，
              setLoginData((loginData) => loginData + 1)
          }, 1000)
          return () => {
              console.log('卸载，清除长任务')
          }
      }, [])
      useEffect(() => {
          console.log('更新前')
      })
      return (
          <>
              SON{loginData}
          </>
  
      )
  }

2、小程序 单组件

• 3-1、应用生命周期

     onLaunch: function() {
       console.log('应用冷启动=>初始化完成+请求接口')
     },
      onShow: function(options) {
      console.log('应用热启动=>启动/后台进入前台+请求接口')
     },
      onHide: function() {
      console.log('应用=>从前台进入后台+卸载长任务')
    }

  • 3-2、页面生命周期

      pageLifetimes: {
          onLoad: function(options) {
            console.log('加载前')
          },
          onReady: function() {
            console.log('加载完+请求接口')
          },
          onHide: function() {
            console.log('应用=>从前台进入后台')
          }
      }

• 3-1、组件生命周期

    lifetimes:{
       created(){
         console.log('     组件==>实例被创建时');
       },
       attached() {
         console.log('     组件==>实例进入页面节点树时+请求接口');
       },
       detached(){
         console.log('     组件==>实例被从页面节点树移除时执行+清除长任务');
       }
    },

3、vue3.5 单组件

    <script setup lang="ts">
      import { onMounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
      onBeforeMount(() => {
        console.log('加载前，请求数据')
      })
      onMounted(() => {
        console.log('加载后')
      })
    
      onBeforeUpdate(() => {
        console.log('更新前')
      })
    
      onBeforeUnmount(() => {
        console.log('卸载前')
      })
    
    </script>