1. 基本使用
import React, { useState, useEffect, useRef } from 'react'
const Fetch = () => {
const [result, setResult] = useState(null)
useEffect(() => {
fetch('./index.html').then(res => {
console.log('--res', res.body);
setResult(res.url)
})
})
return (
<div>
result: {result}
</div>
)
}
function App() {
return (
<div className="App">
<Fetch />
</div>
)
}
export default App
2. 存在依赖项
- 依赖项为一个空数组[]时只执行一次
- 只要有一个变化useEffect都会重复执行
useEffect(() => {
fetch('./index.html').then(res => {
setResult(res.url)
})
}, [a, b])
- capture value
如果在没有依赖的情况下，会捕获初次执行时获得的状态值，之后会一直使用此状态值，哪怕外部的状态值发生了变化
useEffect(() => {
console.log(count);
setInterval(() => {
// capture value 特性使得count一直是0
setCount(count + 1)
}, 500)
}, [])
image.png
const [count, setCount] = useState(0)
useEffect(() => {
const timer = setTimeout(() => {
setCount(count + 1)
}, 500)
return () => clearTimeout(timer)
},[count])
- react hooks不予许在条件语句，或者条件语句后面执行
react hooks会把所有的hooks当做一个链表存储，
如果有if语句，会让组件提前结束，hooks添加不到链表中
// 条件语句中添加effect是不允许的
if (count > 5) {
useEffect(() => {
console.log(count);
})
}
// 这种也是不可以的
if (count > 5) {
return null
}
useEffect(() => {
console.log(count);
})
