数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
可以把 useEffect
Hook 看做 componentDidMount
,componentDidUpdate
和 componentWillUnmount
这三个函数的组合。
一 不需要清除的副作用
import React, { useState, useEffect } from "react"; // 记录渲染次数 let times = 0; export default function App(props) { console.log(`第${++times}次渲染`); const [counter, setCounter] = useState(0); useEffect(() => { document.title = `第${counter}次点击`; }); return ( <div> <button onClick={e => setCounter(counter + 1)}>按钮</button> </div> ); }
二 需要清除的副作用
import React, { useState, useEffect } from "react"; export default function App(props) { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() => { window.addEventListener("resize", onResize, false); return () => { window.removeEventListener("resize", onResize, false); }; }, []); const onResize = e => { setSize({ width: window.innerWidth, height: window.innerHeight }); }; return ( <div> 窗口尺寸:{size.width}*{size.height} </div> ); }