边黎安 react hooks 各个生命周期的详细解读

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

function HooksComponent(props) {
  const [count, setCount] = useState(0);



  //对操作
  const mounted = useRef();
  useEffect(()=>{
    if(!mounted.current){
      mounted.current = true
    }else {
      //do componentDidUpdate
    }

  });
  const onClick = () =>{
    "use strict";
    setCount(count +1);
    setTimeout(()=>{
      console.log(count)
    },1000)
  }

  // useEffect(()=>{
  //   //didmount  和didupdate
  //
  // })

  // useEffect(()=>{
  //   //只有mount
  //
  // },[])

  // useEffect(()=>{
  //  didmount使用
  //   console.log(111)
  //   return () =>{
  // 只有unmount 时调用
  //    console.log(222)
  //
  //   }
  //
  //
  // },[])

  return (
      

        
You clicked {count} times
        
          Click me
        
      
  );
}

export default HooksComponent