React useMemo函数

第一个参数是回调函数,返回计算的结果,第二个参数是依赖项,该函数只监听count1变量的变化

cpp 复制代码
import { useReducer, useState } from 'react';
import './App.css';

// 定义一个Reducer函数 根据不同的action进行不同的状态修改 

function reducer(state,action){
  switch(action.type){
    case `INC`:
      return state+1
    case `DEC`:
      return state-1 
    case `SET`:
      return action.payload
    default:
      return state


  }
}

// 调用useReducer函数将reducer函数作为参数并设定初始状态



// 斐波那契数列
function fiber(n){
  console.log(`正在进行斐波那契计算`)
  if(n < 3){
    return 1
  }
  else return fiber(n-1)+fiber(n-2)
}
function App() {
  const [state,dispatch] = useReducer(reducer,0)
  const [count1,setCount1] = useState(0)
  const [count2,setCount2] = useState(0)

  const result = fiber(count1)


  return (
    <div className="App">
     
     {result}
    <button onClick={()=>{dispatch({type:`INC`})}}>+</button>
    <button onClick={()=>{dispatch({type:`DEC`})}}>-</button>
    <button onClick={()=>{dispatch({type:`SET`,payload:9527})}}>更新</button>
    
    <button onClick={()=>{setCount1(count1+1)}}>更新count1</button>
    <button onClick={()=>{setCount2(count2+1)}}>更新count2</button>



    
    </div>
  );
}

export default App;

不使用useMemo函数时,在其他State发生变化时UI也会被重新渲染

作用:缓存计算的结果

相关推荐
前端进阶者2 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享10 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享11 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海15 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子25 分钟前
深入理解TCP协议
前端·javascript·面试
万少26 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器