2403_88913721的博客

本文介绍了使用Jest和React Testing Library对React Button组件进行单元测试的实践。测试内容包括：基础渲染验证、参数化测试不同按钮类型和尺寸、状态测试（禁用和加载）、图标按钮测试以及交互测试（点击事件）。通过制定明确的测试策略，采用自动化测试方法确保组件质量，验证了样式变化、状态管理、交互行为和无障碍支持等功能。测试工具配置简单，测试用例覆盖全面，能够有效保障代码稳定性和开发敏捷性，支持持续集成流程。

本文介绍了基于React和ECharts封装可复用图表组件的实践经验。通过搭建通用图表容器，实现了折线图、柱状图等不同类型图表的动态渲染。重点讲解了图表生命周期管理（初始化/销毁实例）、响应式设计（窗口变化处理）、数据驱动更新机制、视觉定制（渐变色/动画效果）等核心实现方案。文章还分享了动态Y轴范围计算、标签格式化等实用技巧，为构建交互式数据可视化组件提供了完整的技术思路。

本文介绍了在Ant Design框架中修改样式的实践方法。作者通过日期选择器实例分享了具体步骤：先在文档中查找样式类位置，通过开发者工具找到对应样式，然后使用CSS in JS语法进行样式覆盖。文章提供了RangePicker和Dropdown组件的代码示例，展示了如何通过dropdownClassName和overlayClassName属性添加自定义样式，并强调了需要注意样式层级和优先级的问题。最后提到可以将元素和样式交给AI辅助修改的实用技巧。

本文介绍了一种基于React高阶组件(HOC)的按钮级权限控制实现方案。通过withPermissons高阶组件，开发者可以定义需要特定权限才能显示的按钮组件。该方案接收所需权限数组和用户权限数组作为参数，在组件内部进行权限校验，仅当用户拥有全部所需权限时才渲染按钮。代码展示了高阶组件的实现细节，包括权限检查逻辑和组件封装方式，并提供了实际应用示例。最后通过两张图片展示了权限控制效果。

本文介绍了基于AntDesign的二次封装Table组件开发过程。该组件主要实现数据展示、批量删除、单条删除、Excel导出、编辑和添加等功能。首先定义了详细的类型系统，包括表格配置类型、组件属性类型和引用类型；其次通过状态管理维护表格数据、分页、选择状态等；核心功能包括数据加载、分页处理和行选择配置；并实现了删除等扩展功能。组件设计注重可配置性和扩展性，支持多种业务场景需求，通过类型定义和状态管理确保代码健壮性，同时提供与父组件的通信机制。

今天学习了React的几个核心Hook：useEffect用于处理副作用操作（如DOM更新、网络请求），可通过返回值实现清除逻辑；useContext简化了Context的值获取；useReducer作为useState的替代方案，适合复杂状态逻辑；useCallback和useMemo则用于性能优化，分别记忆化函数和值。这些Hook极大地简化了React的功能实现方式。

React Hooks让函数式组件开发更加简洁高效，解决了this绑定问题。通过useState可以轻松管理组件状态，包括基本数据类型、数组和对象等复杂数据结构。真的太好用了！！！

今天学习了react里面的路由，学习了里面的很多API,比如Link,Navlink,Route,我跟的课程版本有点老了，switch变成了routes,redirect变成了navigate，路由的嵌套也发生了很大的变化，摈弃了config的方法

今天有深入了一下redux中的异步请求，因为reducer处理的是同步的action，异步的需要通过中间件将异步action转化为同步action，有两种方案：redux-thunk和redux-saga，它们最大的不同就是耦合性的问题

今天把transition学完了，然后学习了一点redux,Redux 是一个用于 JavaScript 应用程序的状态管理库，主要用于解决复杂应用中的状态管理问题。它的核心思想是提供一种可预测的状态管理机制，通过集中式存储（Store）来管理应用的所有状态，从而简化状态更新和组件间的数据共享。

今天主要学习了react里面的style写法中的styled-components、axios封装、react-transition-group中的CSSTransition，我发现我用的19一般都会有很大的问题，版本不兼容之类的，都要把19的版本修改为18，好头疼！！！

今天学习了一些拓展内容：React高阶组件、转发ref和Portal，太多内容啦，脑子有时候有点接收不过来，在实际应用的时候要多多使用，写了一下高阶组件的案例，感觉它就是很组件化哈哈哈哈，让代码优雅不少呢！

今天主要学习了不可变数据、全局事件传递和受控组件。在不可变数据部分，强调不能直接修改state，推荐使用新数组替代原数组来维护数据不可变性。通过EventEmitter实现跨组件事件通信，也直接敲了事件监听与触发的完整流程。最后学习了受控组件的实现方式，即表单元素值由React state控制。

这两天学习了组件通信、slot插槽、setState的源码、React的更新流程以及优化。

React组件分为函数组件和类组件，依据状态可分为无状态和有状态组件，按职责分为展示型和容器型组件。React生命周期包括挂载(Mount)、更新(Update)和卸载(Unmount)阶段，关键方法如componentDidMount、componentDidUpdate和componentWillUnmount分别处理初始加载、更新和清理逻辑。组件间数据传递主要通过props实现父传子通信。

今天学习了一下react的脚手架，有了脚手架还是会轻松很多噢，但是我发现我的react版本太新了何老师的很多都不一样，看来之后需要ai加文档学习了。

今天学习了jsx的本质，之前我一直阶段学习本质没有什么必要，但是我发现学习完底层原理之后写代码会清晰很多。然后今天还进行了应该阶段小练习，也是写了很久，也深深明白了setState里面是不允许改变原有的数据的，还有就是调用函数哪一个地方，真的是深有感悟，一辈子都记得了哈哈哈哈哈

嗨嗨嗨！！！从南京gap回来啦，南京真的是很美很有历史底蕴的城市呢，好想再去一次哈哈。今天主要学了一些jsx的核心语法，和vue有一些相似也有很多不同。主要讲了嵌入、绑定以及渲染三个方面，具体在下方，明天也要继续加油！！！

啦啦，今天对react有了一点点新的认识捏，从react的基本框架到绑定数据最后再到编写函数改变数据的值，让我一步一步揭开react的面纱，它的语法确实要灵活很多，组件化也体现了出来，很期待接下来的学习内容。