边黎安 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 (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={onClick}>
          Click me
        </button>
      </div>
  );
}

export default HooksComponent