Etc.End的博客

还有其他构建React项目的方式，这里就举这三种比较常用的列子，至于选择哪一种去构建，根据自己的需求以及项目的复杂程度。如果你需要快速构建简单的React应用程序，可以选择Create-React-App或Vite。如果你需要构建复杂的React应用程序，并希望拥有更多的控制权和可扩展性，可以选择Umi-Max。我是Etc.End。

项目中使用prettier和eslint以后，Prettier可以根据配置的规则自动格式化代码，使代码看起来更整洁、易读、易于维护。由于代码格式化可以自动完成，开发者可以专注于编写代码，减少因代码格式问题而分散注意力。Prettier可以轻松集成到编辑器、构建工具和CI/CD流程中，使代码格式化更加方便。Prettier的配置非常灵活，可以根据项目需求定制化配置规则，比如控制代码的宽度、空格长度、是否使用分号结尾等。

TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。

Typescript，type就是我们所说的类型，那类型是什么。下面举两个列子。列子一【变量】在下面的代码中，我定义了name和age两个遍历，并且初始值为""字符串和0。可以看到我标红的地方。编辑器自动识别到了这两个变量的类型。此时name后面的:string就是我们所有的类型。那它有什么用呢，上面的代码是正确的写法，所有不会出现什么异常，下面我在onClick事件中故意给它赋一些不支持的值看看会出现什么。我在点击事件中给age赋值了一个字符串。

useState是React中至关重要的一个Hooks，它在我们的实际项目开发中应用广泛且使用频繁，因此熟练掌握其使用方法至关重要。useState的使用相对简单，易于上手，基本上没有太多难度。通过理解和掌握这个Hooks，你将能够更有效地处理组件的状态管理，提升React应用程序的性能和可维护性。我是Etc.End。

useEffect就有点类型于Vue中的学习React需要掌握useEffect。useEffect是React中的一个非常重要的Hook，它允许在函数组件中执行副作用操作。在开发中，useEffect非常重要，因为它可以帮助我们处理许多常见的副作用操作，例如订阅事件、修改DOM、发送网络请求等。通过使用useEffect，我们可以将副作用代码从组件的渲染逻辑中分离出来，使其更加清晰和易于维护。此外，useEffect还可以帮助我们避免在组件卸载后忘记取消订阅事件或清除定时器等常见问题。

useRef、useMemo、useCallback这些React Hook在我们开发过程中都具有重要的意义。useRef是一个用于保存组件内部可变数据的Hook。通过使用useRef，我们可以在组件渲染周期内保存数据，并在组件重新渲染时保持数据不变。这在一些场景中非常有用，例如记录上一次渲染的一些值，或者在组件生命周期中保持一些状态的不变性。useMemo是一个用于优化性能的Hook。在复杂的React应用中，我们可能会遇到组件频繁重新渲染的情况，这可能会导致应用性能下降。

useImperativeHandle和forwardRef都是React Hooks的一部分，它们的作用和重要性如下：useImperativeHandle是一个用于暴露自定义ref属性和自定义方法的钩子函数。它使得父组件可以通过ref访问子组件中定义的方法和属性，从而实现对子组件的精细控制。也就是说，父组件可以使用子组件的方法或者控制子组件。当使用useImperativeHandle时，需要子组件中的第二个参数（ref）当作useImperativeHandle的第一个参数。

React 有一些内置 Hook，例如 useState，useContext 和 useEffect。在React中，自定义Hook的作用就是将组件之间的公共逻辑提取出来，以便在不同的组件中复用。这与我们在面向对象的编程中，将公共方法提取到一个新的类中并在多个对象之间共享这个类的方法是类似的。自定义Hook可以帮助我们更好地组织和复用代码，提高代码的可读性和可维护性。使用自定义Hook，我们可以将组件的逻辑封装在一个独立的函数中，并在需要的时候调用这个函数。

在React中，CSS和Sass仍然非常重要，因为它们可以帮助开发者更好地组织和维护样式代码，以及提高开发效率。CSS是一种用来描述HTML或XML等文件样式的计算机语言，它能够精确控制网页中元素的位置、布局、字体、颜色、背景等效果。在React中，每个组件都是独立的，因此它们各自的样式也需要单独定义和管理。使用CSS可以帮助开发者更好地组织和维护这些样式代码，同时还能提高代码的可重用性和可维护性。

自定义组件是指根据应用需求，自定义的组件。它们可以是有状态的或无状态的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定义组件在React应用中非常常见，因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成，组件是构建React应用程序的基石。它们可以封装可重用的UI组件，使代码更加模块化和可维护。自定义组件可以有很多用途。例如，它们可以创建可重用的UI组件，如按钮、表单、布局等。

在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。

欢迎加入本专栏！本专栏将引领您快速上手React，让我们一起放弃放弃的念头，开始学习之旅吧！我们将从搭建React项目开始，逐步深入讲解最核心的hooks，以及React路由、请求、组件封装以及UI（Ant Design）框架的使用。让我们一起掌握React，开启前端开发的全新篇章！

新建src/hooks/useAppSelector.tsx文件新建src/hooks/useAppDispatch.tsx文件React Redux提供了统一的、可预测的状态管理方案，使得开发者能够更好地组织和管理应用的状态。它通过使用单一数据源、不可变性和纯函数等核心概念，提供了一种可靠的状态管理方式，减少了状态管理方面的困惑和错误。良好的状态管理能够提高应用的可维护性、可扩展性和可测试性。

Ant Design还是是很重要的。它是一个成熟的前端框架，提供了丰富的组件库，包括按钮、表单、表格、图标、菜单、对话框等等，可以满足各种常见的界面需求。此外，它还支持国际化，可以根据不同的语言和地区自动切换组件的文本和样式。因此，对于前端开发人员来说，学习Ant Design是非常有必要的。它可以帮助你提高开发效率和质量，打造出令用户满意的前端应用。同时，Ant Design的活跃社区和丰富的案例教程也可以帮助你学习和交流。