Jasmin博客

针对上面代码封装hook函数进行代码优化场景：当前状态数据的各种操作逻辑和组件渲染是写在一起的，可以采用自定义hook封装的方式让逻辑和渲染相分离实现步骤：1️⃣把和tabs相关的响应式数据状态以及操作数据的方法放到hook函数中2️⃣组件中调用hook函数，消费其返回的状态和方法//home文件下useTabs.tstry {}, [])return {channels,//home文件下 index.tsxreturn (<div>{/* tab区域 */}))}

React和TypeScript集合使用的重点集中在 存储数据/状态有关的Hook函数以及组件接口的位置，这些地方最需要数据类型校验。

zustand状态管理工具

类组件

useInperativeHandle是通过ref暴露子组件中的方法。

react.forwardRef使用ref暴露DOM节点给父组件。

useCallback的使用方法，useCallback也是用来缓存的，只不过是用于做函数缓存。

下面的子组件通过 memo 进行包裹之后，返回一个新的组件MemoSon, 只有传给MemoSon的props参数发生变化时才会重新渲染。, 但是因为组件App俩次渲染生成了不同的对象引用list，所以传给MemoSon组件的props视为不同，子组件就会发生重新渲染。传递一个引用类型的prop 比较的是新值和旧值的引用是否相等 当父组件的函数重新执行时，实际上形成的是新的数组引用。进行比较，针对于对象数据类型，只会对比俩次的引用是否相等，如果不相等就会重新渲染，React并不关心对象中的具体属性。

但是当我们修改num状态的时候，斐波那契求和函数也会被执行，显然是一种浪费。思路: 只有count发生变化时才重新进行计算。下面我们的本来的用意是想。

做法：分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数。分派action传参。

react pc端项目案例

记账本案例

1.store modules 下 takeaway.js文件。1.store modules下 takeaway.js文件。2.foodItem下index.js文件。1.cart文件下index.js文件。2.store下index.js文件。1.cart下面index.js。2.cart下index文件。

【代码】react 。

react基础知识