2 useEffect() 副作用钩子

useEffect 可以接收两个参数，第一个参数接收一个函数，可以用来做一些副作用，比如异步请求，修改外部参数等行为；返回值（如果有）则在组件销毁或者调用函数前调用。

第二个参数是一个数组，数组中的内容可以称之为依赖项，当数组中的值发生变化就会触发执行 useEffect 第一个参数中的函数。

2.1 不传第二个参数

useEffect 不传递第二个参数，表示不监听任何参数的变化。

每次渲染DOM之后，都会执行 useEffect 中的第一个函数。

useEffect(() => {
    
    
	...
})

2.2 第二个参数为空数组 []

useEffect 第二个参数为 空数组 时，相当于初始化执行一次。

useEffect(() => {
    
    
	...
},[])

2.3 第二个参数数组中有值

useEffect 第二个参数为数组并且数组中有值时，

那么当任意一个值发生改变，即会执行useEffect的第一个函数。

useEffect(() => {
    
    
	console.log('other改变了')
}, [other])
    
useEffect(() => {
    
    
	console.log('count或other改变了')
}, [count, other])

2.4 当函数中有返回值

useEffect 第一个参数函数中有返回值，即返回值相当于销毁，
也可用于关闭页面的监听订阅和定时器。

useEffect(() => {
    
    
	return () => {
    
    
		console.log('我销毁了！-------------------')
	}
}, [])

2.5 完整示例

import React, {
    
     useState, useEffect } from 'react'
 
const Effect = function () {
    
    
  const [count, setCount] = useState(0)
  const [other, setOther] = useState(10)
 
  useEffect(() => {
    
    
    console.log('每次更新都会执行，相当于didmount、didUpdate')
  })
    
  useEffect(() => {
    
    
    console.log('只在初始化时候执行，相当于didMount')
  }, [])
 
  useEffect(() => {
    
    
    console.log('count改变了')
  }, [count])
 
  useEffect(() => {
    
    
    console.log('other改变了')
  }, [other])
    
  useEffect(() => {
    
    
    console.log('count或other改变了')
  }, [count, other])
 
  useEffect(() => {
    
    
    return () => {
    
    
      console.log('我销毁了！-------------------')
    }
  }, [])
 
  const handleClick = () => {
    
    
    setCount(count + 2)
  }
 
  const handleOtherClick = () => {
    
    
    setOther(other + 1)
  }
 
  return (
    <div>
      <div>Count：{
    
    count}</div>
      <button onClick={
    
    handleClick}>操作触发Count</button>
      <div>Other：{
    
    other}</div>
      <button onClick={
    
    handleOtherClick}>操作触发Other</button>
    </div>
  )
}
 
export default Effect

2.6 可模拟类组件生命周期

useEffect Hook 通常用于模拟类组件的生命周期，可以看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个类组件生命周期函数的组合。

【React】hooks 之 useEffect

文章目录