useEffect

• useEffect 可以彌補(bǔ)函數(shù)組件沒(méi)有生命周期的缺點(diǎn)。我們可以在useEffect第一個(gè)參數(shù)回調(diào)函數(shù)中，做一些請(qǐng)求數(shù)據(jù)，事件監(jiān)聽(tīng)等操作，第二個(gè)參數(shù)作為 dep 依賴(lài)項(xiàng)，當(dāng)依賴(lài)項(xiàng)發(fā)生變化，重新執(zhí)行第一個(gè)函數(shù)。
• useEffect 看做 componentDidMount ，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合。
• useEffect 執(zhí)行順序：組件更新掛載完成 => 瀏覽器 DOM 繪制完成 => 執(zhí)行 useEffect 回調(diào)。
• 在 React 更新 DOM 之后運(yùn)行一些額外的代碼。比如發(fā)送網(wǎng)絡(luò)請(qǐng)求，手動(dòng)變更 DOM，記錄日志，這些都是常見(jiàn)的無(wú)需清除的操作。

import React, { useEffect, useState } from "react";
import './App.css';

function App() {
    let [num1, setNum1] = useState(0);
    let [num2, setNum2] = useState(0);

    const add1 = () =>{
      setNum1(num1+1);
    }
    const add2 = () =>{
      setNum2(num2+1);
    }

  // 實(shí)時(shí)監(jiān)聽(tīng)所有
  // useEffect(()=>{
  //   console.log('num1', num1);
  //   console.log('num2', num2);
  //   console.log('============');
  // })

  // 只在初次渲染時(shí)監(jiān)聽(tīng)
  // useEffect(()=>{
  //   console.log('num1', num1);
  //   console.log('num2', num2);
  //   console.log('============');
  // },[])

  // 實(shí)時(shí)監(jiān)聽(tīng) num1
  useEffect(()=>{
    console.log('num1', num1);
    console.log('num2', num2);
    console.log('============');
  },[num1]);



  return (
      <div className="App">
        <h1 onClick={add1}>num1：{num1}</h1>
        <h1 onClick={add2}>num2：{num2}</h1>
    </div>
  );
}

export default App;

• useEffect 返一個(gè)函數(shù)用于清除事件監(jiān)聽(tīng)等操作。

import React, { useEffect, useState } from "react";
import './App.css';

/* 定時(shí)器 延時(shí)器等 */
const timer = setInterval(()=>console.log('setInterval'), 1000);

/* 模擬事件監(jiān)聽(tīng)處理函數(shù) */
const handleResize =()=>{
  console.log('handleResize');
}
/* 事件監(jiān)聽(tīng) */
window.addEventListener('resize', handleResize);

function App() {
    let [num1, setNum1] = useState(0);

    const add1 = () =>{
      setNum1(num1+1);
    }

    // num1的值變化時(shí)清除
    useEffect(()=>{
      return function(){
        console.log('num1 值變化了');
        clearInterval(timer);
        window.removeEventListener('resize', handleResize);
      }
    }, [num1]);

    return (
        <div className="App">
          <h1 onClick={add1}>num1：{num1}</h1>
      </div>
    );
}

export default App;