【九月打卡】第10天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第5章 组件测试

主讲老师：张轩

课程内容：

今天学习的内容包括：

5-5 添加Button 测试代码 第二部分
6-1 Menu 组件需求分析

课程收获：

fireEvent 其实是 userEvent 的另外一种 更底层的实现，两者使用的代码是一样的 ，使用的时候可以根据实际情况选择

Mock 函数可以轻松地测试代码之间的连接——这通过擦除函数的实际实现，捕获对函数的调用 ( 以及在这些调用中传递的参数) ，在使用 new 实例化时捕获构造函数的实例，或允许测试时配置返回值的形式来实现。Jest中有两种方式的Mock Function，一种是利用Jest提供的Mock Function创建，另外一种是手动创建来覆写本身的依赖实现。

menu 导航

组件的使用场景

需求定义

设计

const classes = classNames(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
[`${prefixCls}-loading`]: !!loading,
[`${prefixCls}-background-ghost`]: ghost,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
});

vue的数据和视图之间，如果数据变更，视图之所以可以同步更新，是因为所谓的数据劫持，也就是Object.defineProperty/Proxy的监听。

react的函数式编程，是class中的render和hooks中的组件函数在每次state/props被更新后，重新执行函数，由于state/props保持不变状态，所以此时函数执行构建的时候是加载的最新状态数据，通过这样方式达到更新react视图