1. 什么是useEffect Hook?
可以把 useEffect Hook 看做componentDidMount，componentDidUpdate和 componentWillUnmount这三个生命周期函数的组合
2. useEffect Hook特点?
可以设置依赖, 只有依赖发生变化的时候才执行
const [nameState, setNameState] = useState('ccnu'); const [ageState, setAgeState] = useState(0); useEffect(()=>{ // componentDidMount // componentDidUpdate console.log('组件被挂载或者组件更新完成'); return ()=>{ // componentWillUnmount console.log('组件即将被卸载'); } }); return ( <div> <p>{nameState}</p> <button onClick={()=>{setNameState('it666')}}>修改</button> <p>{ageState}</p> <button onClick={()=>{setAgeState(ageState + 1)}}>增加</button> <button onClick={()=>{setAgeState(ageState - 1)}}>减少</button> <hr/> </div> ) } function App() { const [isShowState, setIsShowState] = useState(true); return ( <div> {isShowState && <Home/>} <button onClick={()=>{setIsShowState(!isShowState)}}>切换</button> </div> ) } export default App;
useEffect Hook对比类组件生命周期方法优势
有分而治之的思想，易于拆分，可以将某一数据的处理全部放在一个effect中
function Home() { const [nameState, setNameState] = useState('lnj'); const [ageState, setAgeState] = useState(0); useEffect(()=>{ // 组件被挂载 console.log('修改DOM'); }); useEffect(()=>{ // 组件被挂载 console.log('注册监听'); return ()=>{ console.log('移出监听'); } }); useEffect(()=>{ console.log('发送网络请求'); }); return ( <div> <p>{nameState}</p> <button onClick={()=>{setNameState('it666')}}>修改</button> <p>{ageState}</p> <button onClick={()=>{setAgeState(ageState + 1)}}>增加</button> <button onClick={()=>{setAgeState(ageState - 1)}}>减少</button> <hr/> </div> ) } function App() { const [isShowState, setIsShowState] = useState(true); return ( <div> {isShowState && <Home/>} <button onClick={()=>{setIsShowState(!isShowState)}}>切换</button> </div> ) } export default App;
