React-useReducer-useMemo

useReducer

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

useReducer基础用法

案例

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