React Hook

 

 useState

import {useState} from 'react'
function App(){
    const [count,setCount] = useState(0);
    return(
      <div>
        {count}
        <button onClick={()=>{setCount(count+1)}}>+1</button>
      </div>
    )
}
const rootElement = document.getElementById("root")
ReactDOM.render(<App/>,rootElement)

 

useEffect

import {useEffect} from 'react'
function App(){
    const [count,setCount] = useState(0)
    useEffect(()=>{
      const timer = setTimeout(()=>{
         setCount(count+1)
      },500)
      return ()=>{
        clearTimeout(timer)
      }
    },[count])
    return(
      <div>
        {count}
      </div>
    )
}
rootElement = document.getElementById("root")
ReactDOM.render(<App/>,rootElement)

结合useRef解决使用setInterval产生的闭包陷阱

function App() {
  const [value, setValue] = useState<number>(0);
  const [timers, setTimers] = useState<Array<NodeJS.Timeout>>([]);
  const saveCallBack: any = useRef();
  const callBack = () => {
    const random: number = (Math.random() * 10) | 0;
    setValue(value + random);
  };
  useEffect(() => {
    saveCallBack.current = callBack;
    return () => {};
  });
  useEffect(() => {
    const tick = () => {
      saveCallBack.current();
    };
    const timer: NodeJS.Timeout = setInterval(tick, 5000);
    timers.push(timer);
    setTimers(timers);
    console.log(timers);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>{value}</div>;
}

 

useRef

结合useEffect获得之前的值

function PrevState() {
  const [count, setCount] = React.useState(0);

  const prevCountRef = React.useRef();
  React.useEffect(() => {
    prevCountRef.current = count;
  });
  const handleClick = () => {
    setCount(count+1)
  }
  return (
    <>
      <button onClick={handleClick}>+1</button>
      <h1>Now: {count}, before: {prevCountRef.current}</h1>
    </>
  )
}

 

useMemo

useCallback

 useReducer

const initialState = {count:0}
function reducer(state,action){
 switch(action,type){
  case 'increment':
    return {count:state.count+1}
  case 'decrement':
    return {count:state.count-1}
  default:
    throw new Error()  
}
}
function Counter(){
 const [state,dispatch] = useReducer(reducer,initialState)
 return(
  <>
   Count:{state.count}
   <button onClick={()=>dispatch({type:'decrement'})}>-</button>
   <button onClick={()=>dispatch({type:'increment'})}>+</button>
</>
)
}