React学习-hooks

官方文档：https://zh-hans.react.dev/reference/react/useActionState

1.useEffect(setup, dependencies?)

1.1 基础使用

//hooks
import { useEffect } from "react";
import "./App.css";function App(){useEffect(()=>{console.log('useEffect loading');})return ( <h1>app</h1>)
}export default App;

执行时机：
1,组件初始化
2，组件更新后执行（在dom更新之后执行）

1.2 传入依赖项时 []

  //第一个参数回调函数，组件初始化执行，组件更新后也会执行useEffect(()=>{console.log('useEffect loading');},[])

执行时机：
组件初始化、挂载

1.3 传入依赖项时 [a]

useEffect可以监听到useState的状态变化
（如果依赖项中传入多个值[a,b,c],只有有其中之一变化都会执行useEffect。或的关系）

import { useEffect, useState } from "react";
import "./App.css";function App() {const [count, setCount] = useState(0);//第一个参数回调函数，组件初始化执行，组件更新后也会执行useEffect(() => {console.log("useEffect loading");console.log(count);// return () => {//   console.log('return 的函数在卸载的时候执行');// }}, [count]);const btn = () => {setCount(count + 1);};return (<div><h1>hooks</h1><h1>{count}</h1><button onClick={btn}>add</button></div>);
}export default App;

在这里插入图片描述

执行时机：
1，组件初始化、挂载
2，依赖项的状态变化时

1.4 第二个参数不传

第二个参数不传，会将所有定义的state值收集起来，只有有一个值变化了就会执行useEffect
在这里插入图片描述

1.5 返回的函数 ☆

执行时机：
1，组件卸载的时候
2，状态发生变化时

  useEffect(() => {console.log("useEffect loading",count);//变化后的数据return(()=>{//return 中的值是变化之前的数据console.log('return!!',count);})});

在这里插入图片描述

应用场景：用于聊天的卸载

用户我跟多个人聊天的场景：

伪代码：
跟用户A

function Bpp(){useEffect(() => {//userAconnect(userA)return(()=>{console.log('return!!');})},[userA]);
}

离开A页面，到用户B

function Bpp(){useEffect(() => {//userBconnect(userB)return(()=>{//userAconsole.log('return!!');//断开A的连接disconnect(userA)})},[userB]);//A-->B
}

2.useState

const [state, setState] = useState(initialState)

import {  useState } from "react";
import "./App.css";function App() {const [count, setCount] = useState(0)const btn=()=>{setCount(count+1)}return ( <div><h1>hooks</h1><h1>{count}</h1><button onClick={btn} >add</button></div>)
}
export default App;