[TOC] ## useEffect `useEffect` 是一个 React Hook，它允许你 [将组件与外部系统同步](https://zh-hans.react.dev/learn/synchronizing-with-effects)。 语法: ``` useEffect(setup, dependencies?) ``` ## 示例 ### 触发机制 ``` // 只在首次更新 useEffect(() => { console.log("start") }, []) // 每次更新 useEffect(() => { console.log("every change") }) // count 依赖更新 useEffect(() => { console.log("change count",count) }, [count]) // count2 依赖更新 useEffect(() => { console.log("change count2",count2) }, [count2]) ``` 当传入空数组时,为首次渲染时触发 ### cleanup ``` import { tree } from 'next/dist/build/templates/app-page'; import { useEffect, useState } from 'react'; function Counter({value}:{value:string}){ useEffect(()=>{ console.log("value",value) return ()=> { console.log("unmount",value) // 当 value 从aa切换到 bb 时, 会触发 "unmount,aa" // 当 设置为 show = false 时, 也会触发 "unmount,bb" } },[value]) return <div> <p>{value}</p> </div> } export default function Demo(){ const [value,setValue] = useState("aa"); const [show,setShow] = useState(true) return <div> {show && <Counter value={value} />} <button onClick={()=>setValue("bb")}>button bb</button> <button onClick={()=>setShow(!show)}>button show</button> </div> } ``` > 组件注销或变更prop 时,会执行 useEffect 的清理函数 > 为了 帮助你发现 bug，在开发环境下，React 在运行 setup 之前会额外运行一次setup 和 cleanup。这是一个压力测试，用于验证 Effect 逻辑是否正确实现 ### 与 window 通信 ``` useEffect(() => { console.log(window) // ok }, [count]) console.log(window) //Uncaught ReferenceError: window is not defined ``` ### 在自定义 Hook 中封装 Effect 封装 ``` function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, [roomId, serverUrl]); } ``` 调用 ``` function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ... ```