hook初步了解

65 阅读1分钟

useReducer

useEffect

useLayoutEffect

useEffect 组件渲染到屏幕之后延迟执行

useLayoutEffect Dom变更后立即同步调用effect

import React,{useReducer,useEffect,useLayoutEffect} from "react"
import {counterReducer} from "../store/"
const init=initArg=>{
  return initArg-0;
}
export default function HooksPage(props){
  const [state,dispatch]=useReducer(countREducer,"0",init);
  useEffect(
   ()=>{console.log("effect")}
  ,[])
  
  useLayoutEffect(
   ()=>{console.log("layouteffect")}
  ,[])
  return(
   <div>
     <h3>HookPAges</h3>
     <p>{state}</p>
     <button onClick={()=>dispatch({type:"Add"})></button>
   </div>
  )
}