【React】hooks 之 useEffect

1 useState
2 useEffect
3 useContext
4 useReducer

---

2 useEffect() side effect hook

useEffect Can receive two parameters, the first parameter receives one 函数, which can be used to do some side effects, such as asynchronous requests, modifying external parameters and other behaviors; the return value (if any) is called before the component is destroyed or the function is called.

The second parameter is one 数组, and the content in the array can be called 依赖项. When the value in the array changes, it will trigger the execution of the function in the first parameter of useEffect.

2.1 Do not pass the second parameter

useEffect does not pass the second parameter, which means it does not monitor any parameter changes.

The first function in useEffect will be executed every time the DOM is rendered.

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

2.2 The second parameter is an empty array []

空数组When the second parameter of useEffect is , it is equivalent to performing initialization once.

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

2.3 There are values ​​in the second parameter array

When the second parameter of useEffect is an array and there are values ​​in the array,

Then when any value changes, the first function of useEffect will be executed.

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

2.4 When there is a return value in the function

The first parameter function of useEffect has a return value, that is, the return value is equivalent to destruction, and
can also be used to close the listening subscription and timer of the page.

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

2.5 Complete example

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 Can simulate the life cycle of class components

useEffect Hook is usually used to simulate the life cycle of class components, which can be seen as componentDidMounta combination of thesecomponentDidUpdate three class component life cycle functions.componentWillUnmount