react hooks入門 -useEffect

useEffect

useEffect(create, deps) 在render之後執行的函數，有兩個參數

1. create類型爲函數，代表觸發useEffect之後執行的函數。
2. deps類型爲數組，接受一個數組，當數組內的值變化時候，觸發useEffect。當deps 等於[]，只會在初次執行，當沒有deps參數 每次都會執行

import React, { useEffect, useLayoutEffect, useState } from 'react';

/**
 * useEffect 在每次render之後執行
 * useEffect(() => {}, []) ==>  componentDidMount
 * useEffect(() => {},[ deps1]) ==> componentDidUpdate
 * useEffect(() => { return }, []) ==> componentWillUnmount
  */
const useEffectDemo = () => {
  const [n, setN] = useState(0);
  const [m, setM] = useState(0);
  const onclick = () => {
    setN(o => o + 1);
  };
  
  const onclickM = () => {
    setM(o => o + 1);
  };
  
  useEffect(() => {
    console.log('只有第一次執行， 等價於componentDidMount')
  }, []);
  useEffect(() => {
    console.log('每次都會執行， 等價於componentDidMount + componentDidUpdate')
  });


  useEffect(() => {
    console.log('當n變化的時候執行，等價於componentDidMount + componentDidUpate')
  }, [n]);

  useEffect(() => {
    const id = setInterval(() => {
      console.log('hello')
    }, 1000)
    return () => {
      console.log('相當於 componentWillUnmount')
      window.clearInterval(id) 
    }
  });
  
  // useLayoutEffect(() => {}, []);
  
  return (
    <div>
      <p>n: {n}</p>
      <button onClick={onclick}> +1 </button>
      <p>m: {m}</p>
      <button onClick={onclickM}> +1 </button>
    </div>
  )

};

export default useEffectDemo;

如demo代碼所示

1. 當第一次加載的時候，會執行所有的useEffect
2. 當n變化的時候， 會觸發useEffect(() => {}, [ n])和 useEffect(() => {})裏面的第一個函數執行
3. 當m變化的時候，只會觸發 useEffect(() => {})執行。
4. 當卸載組件的時候會執行return裏面