useEffect代替常用生命周期函数
useEffect 实现componentDidMonut和componentDidUpdate生命周期函数
- 第一次组件渲染和每次组件更新都会执行
useEffect()
- 类似于类中的
componentDidMonut
和componentDidUpdate
-
useEffect
中定义的函数的执行不会阻碍浏览器更新视图,也就是说这些函数时异步执行的,而componentDidMonut
和componentDidUpdate
中的代码都是同步执行的import React, { useState , useEffect } from 'react'; function Example(){ const [ count , setCount ] = useState(0); //---关键代码---------start------- useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`) }) //---关键代码---------end------- return ( <div> <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>click me</button> </div> ) } export default Example;
useEffect 实现 componentWillUnmount生命周期函数
- 可以用一个返回函数的形式来实现
- 每次状态发生变化和
componentWillUnmount
的时候,都会执行return
function Index() { useEffect(()=>{ console.log('useEffect=>老弟你来了!Index页面') return ()=>{ console.log('老弟,你走了!Index页面') } }) return <h2>JSPang.com</h2>; }
-
useEffect
的第二个参数是一个数组,可以传入很多状态对应的变量,当状态值发生变化时,才可以进行解绑。但是当传入空数组时,只有当组件将被销毁时才进行解绑function Index() { useEffect(()=>{ console.log('useEffect=>老弟你来了!Index页面') return ()=>{ console.log('老弟,你走了!Index页面') } },[]) return <h2>JSPang.com</h2>; }
function Example(){ const [ count , setCount ] = useState(0); useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`) return ()=>{ console.log('====================') } },[count]) return ( <div> <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>click me</button> <Router> <ul> <li> <Link to="/">首页</Link> </li> <li><Link to="/list/">列表</Link> </li> </ul> <Route path="/" exact component={Index} /> <Route path="/list/" component={List} /> </Router> </div> ) }