useEffect()
接受两个参数。第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,只要这个数组发生变化,useEffect()
就会执行。第二个参数可以省略,这时每次组件渲染时,就会执行useEffect()
import React, {useState,useEffect} from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
function Index(){
useEffect(()=>{
console.log('hello,index')
return ()=>{
console.log('bye,index')//路由解綁
}
},[])//第二個參數設為空時只有index被加載或者解綁時才知曉useEffect
return <h2>hello,index</h2>
}
function List(){
useEffect(()=>{
console.log('hello,list')
return ()=>{//路由解綁
console.log('bye,list')
}
},[])
return <h2>hello,list</h2>
}
function Example(){
const [count,setCount]=useState(0)
useEffect(()=>{
console.log(`你點擊了${count}次`)
return ()=>{
console.log(1111111111)
}
},[count])//只要count發生改變都會執行return的解綁函數
return (
<div>
<p>点击{count}次</p>
<button onClick={()=>{setCount(count+1)}}>点击</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>
)
}
export default Example