- 博客(100)
- 收藏
- 关注
RSS订阅原创 探索React Router:实现动态二级路由
我有一个路由配置的二维数组，想根据这个数组结合路由组件来动态生成路由，应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 `Route` 组件和路由嵌套的方式。
2024-04-24 23:05:57
328
原创 Redux 状态持久化之 redux-persist 使用示例
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
2024-04-24 12:36:15
252
原创 在Redux Toolkit中使用redux-persist进行状态持久化
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文就 Redux Toolkit 中使用 `redux-persist` 持久化进行说明
2024-04-24 12:29:28
157
原创 在React函数组件中使用错误边界和errorElement进行错误处理
ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。
2024-04-24 11:39:08
306
原创 玩转React路由,教你根据角色动态生成路由
用户登录成功后，我已经获取到了用户的角色，并且根据角色获取到了用户的拥有的权限路由。我想在登录成功后动态生成路由，来实现不同角色的用户,具备不同的权限，应该怎么实现？
2024-04-23 19:54:30
161
原创 在React Router 6中使用useRouteLoaderData钩子获取自定义路由信息
在 React Router 6 中怎么像vueRouter一样，可以在配置路由的时候，定义路由的元信息(附加信息)？答案是可以的。稍有些复杂。先需要使用 createBrowserRouter 或 createHashRouter 来创建路由器实例，然后通过RouterProvider来加载路由，通过为每个路由定义了一个 loader 函数,用于返回自定义的路由信息，最后通过useRouteLoaderData 钩子来获取自定义的路由信息。
2024-04-22 20:50:07
507
原创 React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
2024-04-21 21:26:48
767
原创 React Router 6 路由重定向与编程式导航指南
在 React Router 6 中实现路由重定向、跳转的常见我方式有2大方式：Navigate组件或useNavigate hook。
2024-04-21 19:48:25
426
原创 React vs Vue.js:两种流行框架背后的设计哲学差异
Vue.js 和 React 虽然都是流行的前端框架,但在设计哲学上有一些显著差异。这些差异源自它们不同的设计目标和出发点。
2024-04-21 19:07:38
634
1
原创 探索 Redux Toolkit 参数传递的4种途径
Redux Toolkit提供了多种灵活的方式来传递参数,主要包括：通过Action Creator函数传参(action.payload)、在extraReducers中传参(action.meta.arg)、通过getState获取参数、action.meta传参、与action.payload类似,传递额外元数据。
2024-04-21 17:11:13
315
原创 @reduxjs/toolkit进阶指南
虽然@reduxjs/toolkit为Redux提供了开箱即用的最佳实践,但它也内置了一些强大的功能,可以极大简化Redux在复杂场景下的使用：内置了Immer简化不可变更新状态、使用createAsyncThunk工具简化了异步操作、提供了createSelector来创建可组合的派生状态选择器，对输入进行缓存和可组合化处理,使得选择器可以高效地重用之前的结果,提取和复用衍生数据计算逻辑。
2024-04-21 13:39:54
306
1
原创 Redux入门:使用@reduxjs/toolkit构建React应用程序状态管理
传统的Redux方案(redux+react-redux)设置和使用过程比较繁琐。幸运的是,Redux官方团队推出了@reduxjs/toolkit,这个工具包极大简化了Redux在React项目中的使用。其核心优势在于：减少样板代码、更简洁的语法、开箱即用的异步处理、不可变更新友好以及良好的开发者体验。
2024-04-21 13:03:47
633
原创 antdesign 组件中的文字默认是英文怎么办
antdesign（antd）目前的默认文案（语言）是英文，如果需要使用其他语言，需要引入语言包，进行一下配置即可。通过在应用的最外层包裹ConfigProvider组件，并为其locale属性传入中文语言包zh_CN来实现。这样，所有的Ant Design组件都将默认使用中文显示。
2024-04-18 18:14:17
269
原创 ERROR in [eslint] reorder to top import/first
在react开发的时候，导入组件、函数时报错：Import in body of module;reorder to top import/first …解决： 变量的声明，要放在import之后。
2024-04-18 17:54:03
157
原创 React Ant Design 中内置、自定义表单验证的火速上手
如何在 React Ant Design 中结合自定义验证规则和内置验证规则,实现复杂的表单验证逻辑。该示例涵盖了表单创建、验证规则定义、表单提交等完整的使用场景。掌握在 React Ant Design 中进行表单验证的各种技巧。
2024-04-18 17:25:59
1393
原创 React 组件生命周期对比：Class vs. 函数式
在 React 中，Class 组件和函数式组件的生命周期存在一些差异。通过对 React 中 Class 组件和函数式组件的生命周期进行对比，详细探讨了它们在设计哲学、生命周期管理和开发技巧上的异同。全面了解 React 中两种组件类型的生命周期特点，以及如何灵活运用它们来构建现代化的 React 应用。
2024-04-13 16:13:55
499
原创 React Hooks 全解: 常用 Hooks 及使用场景详解
React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具,大幅提高了开发效率和代码质量。让我们一起探索 React Hooks 的强大功能,提升您的 React 开发水平。
2024-04-13 15:36:00
1072
1
原创 一文掌握 React 开发中的 JavaScript 基础知识
在 React 开发中掌握掌握基础的 JavaScript 方法将有助于编写出更加高效、可维护的 React 应用程序。在 React 开发中使用 ES6 语法可以带来更简洁、可读性更强、功能更丰富,以及更好性能和社区支持等诸多好处。这有助于提高开发效率,并构建出更加优秀的 React 应用程序。
2024-04-12 22:44:31
569
2
原创 MobX进阶:从基础到高级特性全面探索
MobX 提供了丰富的高级特性,包括计算属性、反应式视图、中间件、异步流程控制、依赖注入和动态 observable 、在服务端渲染和 TypeScript 支持方面提供了良好的集成。这些特性进一步增强了 MobX 在状态管理方面的灵活性和可扩展性,使其成为一个功能强大、易于使用的状态管理解决方案。当与 React 组件集成时,TypeScript 也可以为组件的 props 和状态提供更好的类型检查支持。可以让我们编写同步风格的异步代码,同时仍能享受 MobX 的自动依赖追踪和状态更新机制。
2024-04-12 18:09:53
616
原创 React Router 5 vs 6:使用上的主要差异与升级指南
对比 React Router 5 和 6 之间的使用差异,可以帮助开发者快速掌React Router 5 和 6 的不同地方、差异。React Router 6 在设计上更加简单易用,引入了更直观的 API,同时也弃用了一些不太常用的功能。可以帮助开发者更好地管理现有项目的升级,提高开发效率和代码质量.
2024-04-12 14:26:49
886
原创 MobX原理剖析：基于可观察状态和自动依赖追踪的响应式状态管理
在 MobX 中,我们将应用程序的状态定义为"可观察的"(observable)，当这些状态发生变化时,与之相关的观察者(通常是 React 组件)会自动得到通知并重新渲染。当 Actions 被执行时,MobX 会自动追踪 Actions 中对可观察状态的读写操作,并通知相关的观察者进行更新。是 MobX 提供的一个特殊的 API,它可以确保在异步操作中状态的更新是原子性的。总的来说,MobX 的核心原理就是利用可观察状态和自动依赖追踪的方式,构建出一个响应式的状态管理系统。
2024-04-11 22:16:59
747
原创 MobX 中 runInAction 的威力:构建原子性状态更新
"原子性状态更新"这个词可以很好地概括 runInAction 的核心功能,即将一组相关的状态更新作为一个整体,要么全部成功,要么全部失败。这种特性对于复杂的异步操作和状态管理非常重要。可以帮助我们构建更加可靠和可预测的 React 应用程序。
2024-04-11 22:05:04
747
原创 MobX入门指南:快速上手状态管理库
MobX 相对于 Redux 的优势在于其简单、可扩展、自动化、性能优异和灵活的状态管理方式。本文详细介绍在react中怎么使用mobx进行状态管理、提高效率。
2024-04-11 19:51:26
419
原创 Ant Design 表单基础用法综合示例
通过示例代码展示了 Ant Design 表单的基本用法,包括字段定义、布局、校验和提交表单、重置、回显示数据常用功能。
2024-04-11 18:18:17
333
原创 Ant Design 组件中文名称大全
整理Ant Design 中主要组件的中英文名称，加深对组件的印象,为后续使用时更容易想起和查找、与团队成员或其他开发者交流时,使用中文名称能够更加清晰地表达自己的意图,有助于沟通交流、可以更好地理解每个组件的功能和适用场景,有助于加深对 Ant Design 组件库的理解、在使用 Ant Design 时更快地找到需要的组件,提高开发效率。
2024-04-11 15:32:55
289
原创 使用 Axios 处理 AxiosError 的三种常见方法
总结了三种常见的使用 Axios 处理 AxiosError 的方法，解决使用axios处理请求的时候错误处理的问题。
2024-04-11 13:48:09
510
原创 一秒解决安装node-sass报错或下载慢的终极方法
在安装node-sass的时候，通常因为网络、网速的问题下载很慢或者安装失败。终极解决方案1秒解决这个问题
2024-04-10 12:04:01
167
原创 深入浅出 useEffect：React 函数组件中的副作用处理详解
是 React 中的一个钩子函数，用于处理函数组件中的副作用操作，如发送网络请求、订阅消息、手动修改 DOM 等。在组件卸载或者依赖项变化前执行清理操作，以避免内存泄漏。当依赖项变化时，重新执行副作用操作。
2024-04-09 21:31:54
463
原创 React Router 中常用的方法总结
在 React 中使用 React Router 可以实现类似于 Vue Router 的路由跳转、获取参数和编程式导航功能。React Router 和 Vue Router 在概念上是相似的，但实现细节有所不同。如果您已经熟悉 Vue Router，可以通过对比的方式，来快速掌握React Routerr的用法。
2024-04-09 21:04:58
408
原创 Redux 异步操作指南：使用 redux-thunk 和 redux-saga
Redux 本身是不支持异步操作的，但是可以通过中间件来实现异步任务。最常用的中间件就是 redux-thunk 和 redux-saga。
2024-04-09 20:08:59
247
原创 React路由快速入门：Class组件和函数式组件的使用
在开始学习React路由之前，先了解一下什么是React路由。React Router是一个为React应用程序提供声明式路由的库。它可以帮助您在应用程序中管理不同的URL，并在这些URL上呈现相应的组件。我们探讨了如何使用Class组件和函数式组件来设置路由。通过掌握React路由的基础知识，您可以轻松地为自己的React应用程序创建复杂的导航系统。更多的学习资料可参考：React Router官方文档: https://reactrouter.com/
2024-04-09 19:33:24
408
原创 跨框架探索：React Redux 和 Vuex 对比分析快速掌握React Redux
React Redux 和 Vuex 都是前端状态管理库，分别用于 React 和 Vue.js 框架。它们都提供了一套规范的状态管理机制，帮助开发者更好地组织和管理应用状态。从Vue开发者视角下的React Redux快速上手指南。
2024-04-09 16:31:11
1580
原创 React 开发者必备技能之Redux基础入门实例
通过简单的计数器示例,了解 Redux 的工作原理以及如何在 React 项目中集成使用 Redux。
2024-04-09 16:03:35
118
原创 React 组件生命周期函数的用法和示例代码
React 中的生命周期函数可以分为三个阶段：Mounting（挂载），Updating（更新）和 Unmounting（卸载）。每个阶段都有不同的函数，用于执行不同的操作。需要注意的是，在 React 16.8 之后，引入了 Hooks 的概念，可以使用 useEffect 等 Hook 来代替生命周期函数。Mounting 阶段是组件实例化并插入到 DOM 中的阶段。在这个例子中，useEffect 函数在组件挂载后和每次更新后都会调用，用于更新文档标题。
2024-04-09 15:56:10
405
原创 React 中与生命周期相关的 Hooks 及其使用示例
useMemo 接受两个参数：第一个参数是一个函数，用来计算结果，第二个参数是一个数组，用来指定哪些状态变量发生变化时需要重新计算结果。useEffect 接受两个参数：第一个参数是一个回调函数，第二个参数是一个数组，用来指定哪些状态变量发生变化时需要重新执行回调函数。在这个示例中，useMemo 函数用于缓存 count 和 factor 的乘积，避免在每次渲染时都重新计算。在这个示例中，useLayoutEffect 函数在组件挂载后立即调用，用于监听窗口大小变化，并在窗口大小变化时更新状态。
2024-04-09 15:45:30
519
原创 一把梭解决 React 组件间通信难题:父子、兄弟、跨层级全覆盖
组件通信是 React 开发中的重要话题,合理的组件通信机制可以帮助我们构建出更加灵活、可维护的应用程序。在本文中,我们将全面探讨 React 中三大类型的组件通信模式:父子组件通信、兄弟组件通信以及跨层级组件通信。在兄弟组件通信部分,我们将讨论如何借助共同的父组件作为中介,利用父组件的状态来实现兄弟组件之间的数据交互。对于父子组件通信,我们将介绍如何利用 props 在父组件和子组件之间传递数据,以及如何通过子组件调用父组件传递的回调函数来实现数据的双向流动。
2024-04-09 13:25:02
408
原创 React 状态管理:安全高效地修改对象属性的 3 种方法
直接修改对象属性是不被允许的,因为 React 的不可变性原则要求我们创建一个全新的对象,而不是直接修改原有的对象。当应用程序的状态发生变化时,React 会自动重新渲染相应的组件,以确保用户界面的更新。通过以上3种方法,我们可以在 React 中安全地修改对象属性,同时也满足 React 的不可变性原则,确保应用程序的正确性和性能。这样可以确保我们创建了一个全新的对象,而不是直接修改原有的对象。在上面的例子中,我们将原有的。冻结了对象,然后在修改时仍然使用展开运算符创建了一个新的对象。
2024-04-09 13:09:32
595
原创 React 状态管理:高效处理数组数据的5种方法
在 React 中,状态(state)如果是数组类型,需要单独处理，因为React 中的状态是不可变的、React 使用 Virtual DOM 机制来提高性能,通过比较新旧状态来决定是否需要更新。如果直接修改数组元素,React 无法检测到状态的变化,从而失去性能优化的效果。、当数组状态发生变化时,组件需要重新渲染。
2024-04-09 13:00:38
406
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人