一个简单的 useEffect 示例如下，它会在每次 render 之后执行，包括首次的 render 以及每次更新后的 render
useEffect(() => {
console.log('useEffect with no dependency')
})
useEffect 规则
- 在每次 render 之后执行
- 接受第二个参数来控制跳过执行，下次 render 后如果指定的值没有变化就不会执行
- useEffect 是在 render 之后浏览器已经渲染结束才执行
参数的规则
- 它是可选的
- 类型是一个数组
- 它的值应该是 props 或 state
不同值的参数
- 不传参数
- 空数组
- 一个值的数组
- 多个值的数组
不传参数
useEffect(() => {
console.log('useEffect with no dependency')
})
如上所示，默认的行为，会每次 render 后都执行
空数组
useEffect(() => {
console.log('useEffect with empty dependency')
}, [])
传入第二个参数，每次 render 后比较数组的值没变化，不会在执行，等同于类组件中的 componentDidMount
一个值的数组
useEffect(() => {
console.log('useEffect widh specify dependency')
}, [id])
传入第二个参数，只有一个值，比较该值有变化就执行
多个值的数组
useEffect(() => {
console.log('useEffect widh specify dependency')
}, [id, name])
传入第二个参数，有2个值的数组，会比较每一个值，有一个不相等就执行
一个例子
function Detail () {
const [ name, setName ] = useState()
useEffect(() => {
function onLoad(data) {
setName(data.name)
}
EventCenter.on('load', onLoad)
return (() => {
EventCenter.off('load', onLoad)
})
}, [])
return(
<div>{name}</div>
)
}
// 示例二
function Goods ({ id }) {
const [ name, setName ] = useState()
useEffect(() => {
fetchApi(id).then(data => setName(data.name))
}, [])
return(
<div>{name}</div>
)
}
比较上面两个例子都使用空数组的参数，对应的 effect 只执行一次，在某些情况下是没问题的，但对于示例二，如果 porps.id 变化了就会遇到问题，一直请求的是上一次的 id 数据，所以 useEffect 应该传入参数 [id]。
一般要尽可能的指定 useEffect 的参数，且要包含当前 effect 使用的所有变量，除非明确知道当前 effect 只执行一次。
