react hooks入门 -useEffect

Hooks全部入门

useState

useEffect

useContext

useRef

重要：自定义hooks

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 (
    

      
n: {n}
       +1 
      
m: {m}
       +1 
    
  )

};

export default useEffectDemo;

如demo代码所示

1. 当第一次加载的时候，会执行所有的useEffect
2. 当n变化的时候， 会触发useEffect(() => {}, [ n])和 useEffect(() => {})，因为第一个以来n，第二个没写依赖所以每次render之后都会执行。
3. 当m变化的时候，只会触发 useEffect(() => {})执行。
4. 当卸载组件的时候会执行return里面