React Hooks(useEffect)

import React, { useEffect, useRef, useState } from 'react';
import { Stack } from 'expo-router';



export default function RootLayout() {

  console.log("开始执行")
  const [msg, setMsg] = useState('https://apis.tianapi.com/bulletin/index?key=9fb2e0558e073ccf65e83eb18b4add2a')

  function updateConn() {
    console.log("updateConn-on-Before", msg)
    setMsg("http://www.baidu.com")
    console.log("updateConn-on-After", msg)
  }

  function updateConn2() {
    console.log("updateConn2-on-Before", msg)
    setMsg("https://www.bilibili.com/")
    console.log("updateConn2-on-After", msg)

  }


  useEffect(() => {
    console.log("进入了useEffect")
    console.log("updateConn--Before", msg)
    updateConn()
    console.log("updateConn--After", msg)

    return () => {
      console.log("updateConn2--Before", msg)
      updateConn()
      console.log("updateConn2--After", msg)
    }
  })

  console.log("结束执行", msg)

 
  
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

前提前要useEffect第二个参数必须是数组,这个数组在useEffect中叫依赖数组

• useEffect第二个参数为空数组的时候，return是不执行的
• useEffect第二个参数有值的时候，return是执行的
• useEFfect只有一个参数，也就是只有一个函数的时候，return是执行的
• useEffect第二个参数为空数组的时候，只运行一次
• useEffect第二个参数有值的时候，每当useState发生变化的时候，才会发生改变
• useEffect只有一个参数，不依赖任何，每次都运行
• useEffect第一个参数中， retrun内 是组件卸载执行，retrun外是组件渲染执行

在useEffect中有一个特殊的报错叫循环依赖，以下是常规解决办法

• constructor依赖注入(不推荐)
• 采用oop模块化设计
• 模块之间采用松耦合
• 采用Mobx，这里注意一下，Mobx不是Pinia和Vuex一样贮存在内存中，Mobx是响应式是开发
• 采用Proxy代理方式