useEffect

在函数式组件里面使用useEffect（）可以实现在类式组件里面的生命周期的效果

使用：

useEffect(()=>{},[])第一个参数是一个回调函数，在里面编写要进行的操作，第二个参数是依赖，如果数组为空，说明不依赖于任何的状态，回调函数里面的操作只会在初始化时执行一次，后续状态更新不会执行里面的操作，相当于类式组件里面的componentDidMount()

如果数组里面写了依赖，那么当所依赖的状态发生变化时，会再次执行回调函数里面的操作，相当于类式组件里面的componentDidUpdate()

在回调函数的最后，可以返回一个函数，这个函数会在组件销毁的时候被执行

Demo.js

import React, { useState, useEffect, useRef } from 'react'

export default function Demo() {
    const [time, settime] = useState(Date())
    const [color, setcolor] = useState('yellow')
    const m = useRef()
    useEffect(() => {
        let timmer = setInterval(() => {
            console.log(Date())
            settime(Date())
            setcolor(m.current.value)
        }, 1000)
        console.log('时间更新了')
        return () => {
            clearInterval(timmer)
        }
    }, [])
    useEffect(() => {
        let timmer = setTimeout(() => {
            console.log('哈哈哈哈')
            setcolor(m.current.value)
        }, 5000)
        return () => {
            clearTimeout(timmer)
        }
    }, [])
    return (
        <div>
            <span>{time}</span>
            <input ref={m} type='text' />
            <button>换色</button>
            <div style={{ background: `${color}`, width: '100px', height: '100px' }} >11</div>
        </div>
    )
}

 

App.js

import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import Demo from './hooks/02-useEffect'

function App() {
  const [flag, setflag] = useState(true)
  return (
    <div className="App">
      {flag && <Demo />}
      <button onClick={() => {
        setflag((flag) => !flag)
      }}>切换</button>
    </div>
  );
}

export default App;