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里面