现在 TypeScript 的发展也越来越成熟，已逐渐应用到我们开发的前端项目之中，它能够带来类型提示，提前规避类型上的错误，来提高项目代码的健壮性，以及更高效的编码效率，前提就是我们需要定义好相应的类型，才能更好的拥有代码上的类型提示。
记得在 React 项目中刚使用 ts 的时候，遇到事件的 Event Handler 中的 e 不知道它怎么去定义，现在来从新盘点一下 React TS 中的 Event Handler 。
就比如下面没有给它定义类型，TS 编译器就会提示错误：
想要写出高质量的代码，仅仅靠框架底层帮我们的优化还远远不够，在编写的过程中，需要我们自己去使用提高的 api，或者根据它底层的原理去做一些优化，以及规范。
相比于 Vue ，React 不会再框架源码层面帮助我们直接解决一下基本的性能优化相关，而是提供一下 API （Hooks）让我们自己去优化我们的应用，也是它自身更灵活的一种原因之一。
下面总结了一些从编写 React 代码层面上能做的优化点。
在项目开发中，跟 svg 打交道可以说必不可少，想对比 png，svg 更可控，还能改变 svg 的样式，体积也会小很多，也相当于一种性能优化。下面看看 React 中使用 svg 的姿势。
svg 它是一种向量图的图片格式，即可伸缩向量图（Scalable Vetor Graphics）。在构建前端应用时经常使用一些图标，相对应我们会比较偏向于使用 svg，那么 svg 有什么好处呢，接下来会说到，这篇文章主要围绕在 React 中如何通过组件的方式使用 svg。
首先看看在项目中使用 svg 有什么好处？
那么下面会说说 React 开发中，如何组件化使用 SVG 的，会讲的实现方式有两种 ：
webpack-iconfont-plugin-nodejs + 封装 Icon 组件实现；vite-plugin-svgr 插件 直接导入实现；首先我们来看看这两个 api 的语法
学习 React 源码的时候，该如何调试是一个头疼的问题，那么如何调试，下面娓娓道来。本文以下内容调试时间与文章发布时间一致，调试版本为 v17.0.2，过程中遇到的问题，会在下面说明。