生命周期——useEffect

使用React的hook——useEffect

import { useState, useEffect } from 'react';
function App() {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(1);
  useEffect(() => {
    console.log('666666');
  })
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>点我修改num</button>
      <button onClick={() => setCount(count + 1)}>点我count</button>
    </div>
  )
}

第二个参数不传

 useEffect(() => {
    console.log('666666')
 })

当 useEffect 第二个参数不传时， 页面初始 和 数据更新 的时候，第一个参数函数都会执行，所以此时初始页面时会输出一次 666666 ，然后无论你点修改num或者修改count的按钮时，也都会输出 666666

第二个参数传空数组

 useEffect(() => {
    console.log('666666')
 }, [])

当 useEffect 第二个参数传 [] 时，那么第一个参数函数只有在 页面初始 的时候才会执行，也就是只执行一次，无论你点修改num或者修改count的按钮，都不会执行这个函数

第二个参数传非空数组

 // ①
 useEffect(() => {
    console.log('666666');
 }, [num])
 
 // ②
 useEffect(() => {
    console.log('666666');
 }, [count])
 
 // ③
 useEffect(() => {
    console.log('666666');
 }, [num, count])

当 useEffect 第二个参数传非空数组时， 页面初始 和 依赖的数据发生更新 的时候，第一个参数函数都会执行。比如上方例子：

• ①、只有按修改num按钮时，才会再次输出 666666
• ②、只有按修改count按钮时，才会再次输出 666666
• ③、无论按哪个按钮都会再次输出 666666

return清除操作

useEffect(() => {
    const timeId = setTimeout(() => console.log('我是定时器'), 1000)
    return () => clearTimeout(timeId)
 })

React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

实在还不理解的同学，可以疯狂点击按钮，看看 我是定时器 这句话会输出多遍还是只输出一遍，就恍然大悟了