useEffect从入门到入土
副作用是相对于纯函数概念来说的, 除事件回调处理副作用,其他副作用尽量放在useEffect中;
- 组件首次渲染、有依赖项更新(Object.is方法判断)时,该useEffect触发
- jsx渲染完成后立马触发useEffect,也是当前作用域下最后执行的内容
- 若不传依赖项,每次都触发;若依赖为[]则只首次渲染触发
const App = () => {const [count, setCount] = useState(0)const [msg, setMsg] = useState('msg')// 除事件回调处理副作用,其他副作用尽量放在useEffectconst handclick = () => {setCount(count + 1)}// jsx渲染完成后立马触发useEffect,也是当前作用域下最后执行的内容// 组件首次渲染、有依赖项更新(Object.is方法判断)时,该useEffect触发// 若不传依赖项,每次都触发;若依赖为[]则只首次渲染触发useEffect(() => {const logCount = () => {console.log(count);}logCount()}, [count])useEffect(() => {console.log(msg);}, [msg])useEffect(() => {console.log(123);},)return <>hello useEffect<button onClick={handclick}> 点击count加1 </button></>}
useEffect清理工作:卸载组件时;下一次更新前清理作用域