【React】useEffect

1. 基本介绍

1. 概念
   
2. 语法
   
   副作用函数+依赖项数组（空数组时，只会在组件渲染完毕后执行一次副作用函数）

2. 使用

import { useEffect, useState } from 'react'

function App() {
  const [value, setValue] = useState(0)
  useEffect(() => {
    console.log('组件渲染完毕')
  }, [])
  useEffect(() => {
    console.log('value的值发生了变化')
  }, [value])
  return (
      <div className="App">
        <button onClick={() => {setValue(value+1)}}>click me, after:{value}</button>
      </div>
  );
}

export default App;

1.3 依赖项参数说明

import { useEffect, useState } from 'react'

function App() {
  const [value, setValue] = useState(0)
  const [count, setCount] = useState(100)
  useEffect(() => {
    console.log('组件渲染完毕')
  }, [])
  useEffect(() => {
    console.log('value的值发生了变化')
  }, [value])
  useEffect(() => {
    console.log('组件初始化 或者 组件更新(value、count变化，组件都会更新）')
  })
  return (
      <div className="App">
        <button onClick={() => {setValue(value+1)}}>plus, after:{value}</button>
        <button onClick={() => {setCount(count-1)}}>minus, after:{count}</button>
      </div>
  );
}

export default App;

1.4 清除副作用

概念：

执行时机：组件卸载

import { useEffect, useState } from 'react'
function Son() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])
  return <div>子组件</div>
}

function App() {
  // 通过控制isShow状态变量来模拟子组件的销毁
  const [isShow, setIsShow] = useState(true)
  return (
    <div className="App">
      {isShow && <Son />}
      <button onClick={() => { setIsShow(false) }}>点击我，隐藏子组件</button>
    </div>
  );
}

export default App;