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;
面试题
react的更新是同步还是异步的？为什么？
异步，因为react更新底层的（微任务）异步队列，会将短时间内js对组件的更新合并，1次渲染完成更新。
useEffect的执行时机？
看第一点
useEffect的返回函数执行时机
1，组件卸载的时候
2，状态发生变化时
应用场景：用于聊天的卸载