useReducer

作用：和useState的作用类似，用来管理相对复杂的状态数据

useReducer基础用法

案例

import { useReducer } from 'react';
//定义reducer函数根据不同action 返回不同状态
const reducer = (state,action)=>{
  switch (action.type) {
    case 'add':
      return state +1
    case 'minus':
      return state - 1
    default:
      return 100
  }
}

const New = () => {
const [state,dispatch] = useReducer(reducer,0)

  return (
    <div>
      <button onClick={()=>dispatch({type:'minus'})}>minus</button>
      {state}
      <button onClick={()=>dispatch({type:'add'})}>add</button>
      <button onClick={()=>dispatch({type:'one'})}>one</button>

    </div>
  )
};
export default New;

 useReducer 传参

 传参案例

import { useReducer } from 'react';
//定义reducer函数根据不同action 返回不同状态
const reducer = (state,action)=>{
  switch (action.type) {
    case 'add':
      return state +1
    case 'minus':
      return state - 1
    case 'params':
      return action.payload
    default:
      return 100
  }
}

const New = () => {
const [state,dispatch] = useReducer(reducer,0)

  return (
    <div>
      <button onClick={()=>dispatch({type:'minus'})}>minus</button>
      {state}
      <button onClick={()=>dispatch({type:'add'})}>add</button>
      <button onClick={()=>dispatch({type:'one'})}>one</button>
      {/* 传参 */}
      <button onClick={()=>dispatch({type:'params',payload:20})}>params</button>

    </div>
  )
};
export default New;

 useMemo

作用:useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

useMemo基础语法   消耗非常大计算才会使用

 案例

import { useMemo,useState } from "react";
const Month = () => {
  const [count1,setCount1] = useState(0)
  const [count2,setCount2] = useState(0)
  const sum = (num)=>{
    if(num<3){
      return 1
    }
    return sum(num-2)+sum(num-1)
  }
  const sun2 = useMemo(()=>{
    //返回计算的结果
    return sum(count1)
  },[count1]) //只有count1发是变化才会执行
  return (
    <div>
    <button onClick={()=>setCount1(count1+1)}>change count1 {count1}</button>
    <button onClick={()=>setCount2(count2+1)}>change count2 {count2}</button>
    {sun2}
    </div>
  )
};
export default Month;