![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 54
react 教程
cangloe
这个作者很懒,什么都没留下…
展开
-
【React】如何更好的在组件中使用浏览器的history属性
在React Router v5示例中,我们创建了一个高阶组件,用于将historylocation和match属性传递给被包装的组件。通过这种方式,可以在任何需要的地方使用history属性来管理浏览器的导航。使用 React Router v6 和钩子,代码更加简洁和现代化。如果可能,建议使用 React Router v6 来管理路由和导航。原创 2024-07-21 18:43:06 · 292 阅读 · 0 评论 -
【React】常见的 HOC 使用案例
高阶组件是一种强大的模式,可以在 React 中实现代码复用和逻辑抽象。提取和重用跨组件的逻辑控制组件的渲染操作传递给组件的 props管理和注入状态。原创 2024-07-21 18:22:34 · 1387 阅读 · 0 评论 -
【React】 HOC高阶组件介绍
高阶组件的概念类似于 JavaScript 中的高阶函数。它不修改原始组件,而是通过包装它并返回一个新组件来扩展组件的功能。逻辑复用(例如,处理身份验证、数据获取等)渲染劫持(通过控制组件的渲染逻辑)状态抽象和注入(管理和注入状态)props 操作(修改或增加传递给子组件的 props)原创 2024-07-21 18:16:11 · 271 阅读 · 0 评论 -
【react】在 React Router v6 中使用路由懒加载
【代码】【react】在 React Router v6 中使用路由懒加载。原创 2024-07-19 14:17:33 · 157 阅读 · 0 评论 -
【react】 可复用 form 表单校验逻辑封装
创建表单上下文并提供表单注册和校验功能。创建自定义钩子来管理单个表单字段的状态和校验。实现 TextInput 文本框的校验规则并在表单组件中使用。这样可以轻松扩展和复用表单校验逻辑。你可以根据自己的需求增加更多的校验规则和表单字段类型。原创 2024-07-19 01:06:21 · 210 阅读 · 0 评论 -
【React】实现类似vue的keepAlive组件的持久化
通过这个完整的案例,我们实现了一个类似于 Vue 的KeepAlive功能的组件,通过缓存组件的实例和其 childNodes,在重新渲染时通过读取childNodes恢复组件。通过这种方式,我们可以确保组件的实际 DOM 节点在卸载和重新挂载之间保持不变,从而实现了组件的持久化。原创 2024-07-16 01:28:02 · 377 阅读 · 0 评论 -
【React 组件封装】封装HTTPGet组件
通过封装HTTPGet组件,你可以在 React 应用中更方便地处理 HTTP GET 请求。安装和配置 axios:安装axios库并创建HTTPGet组件。封装 HTTP GET 请求逻辑:在HTTPGet组件中使用useEffect和axios来执行 HTTP GET 请求,并管理请求状态(dataloading和error使用 render props 模式:通过 render props 模式将请求的结果传递给子组件,以便在应用中使用。原创 2024-07-15 15:56:49 · 157 阅读 · 0 评论 -
【redux】redux-promise 使用案例
通过,你可以简化 Redux 中异步操作的处理。安装和配置中间件:在 Redux store 中应用中间件。创建返回 Promise 的 action creators:这些 action creators 返回一个 Promise,会处理这些 Promise 并在它们解析或拒绝时分发相应的 actions。编写相应的 reducer:处理由分发的 actions,更新应用的状态。在 React 组件中使用 Redux:使用和连接 Redux store,并触发异步 action。原创 2024-07-11 15:59:19 · 377 阅读 · 0 评论 -
【redux】redux-thunk 结合 Redux Toolkit 使用案例
通过使用,你可以轻松地处理 Redux 中的异步操作。安装和配置中间件:在 Redux store 中应用中间件。创建 slice 和 thunks:使用创建一个 slice,并定义处理异步操作的 thunk。在 React 组件中使用 Redux:使用和钩子来连接 Redux store,并触发异步请求。连接 Redux Provider:确保你的应用使用Provider组件来传递 Redux store。原创 2024-07-11 15:38:24 · 301 阅读 · 0 评论 -
【redux】redux-thunk 使用案例
通过使用,你可以轻松地处理 Redux 中的异步操作。安装和配置中间件:在 Redux store 中应用中间件。创建 actions 和 action creators:定义用于异步操作的 thunk action creators。创建 reducer:处理异步操作的状态变化。在 React 组件中使用 Redux:使用connect或者hook方法来连接 Redux store,并触发异步请求。连接 Redux Provider:确保你的应用使用Provider。原创 2024-07-11 15:12:24 · 359 阅读 · 0 评论 -
React 应用中实现操作按钮的权限控制
);原创 2024-07-09 15:10:07 · 253 阅读 · 0 评论 -
react 配合vite,利用 import.meta.glob,实现动态路由
);通过以上步骤,我们使用 Vite 作为构建工具,并利用 import.meta.glob 动态导入组件,通过后端接口获取授权菜单数据并在 React 应用中生成动态路由。这样可以根据用户的不同权限进行菜单和路由的动态生成和控制。根据具体需求,可以进一步优化和扩展权限逻辑。原创 2024-07-09 14:49:43 · 329 阅读 · 0 评论 -
react 通过后端接口实现路由授权
通过上述步骤,我们实现了通过后端接口获取用户权限并在 React 应用中进行动态路由权限控制。这使得权限管理更加灵活和动态,能够根据用户的不同权限进行路由的动态生成和控制。根据具体需求,可以进一步优化和扩展权限逻辑。原创 2024-07-05 19:22:51 · 326 阅读 · 0 评论 -
【React Hook】- useId
是 React 18 引入的一个新 Hook,用于在客户端和服务器端生成唯一的 ID。但是,这些库生成的 ID 在客户端和服务器端可能不一致,导致在 SSR 时出现 ID 冲突的问题。可以解决这个问题,因为它在客户端和服务器端生成相同的 ID。这使得我们可以在 SSR 时使用相同的 ID,而不会出现冲突。在客户端和服务器端生成相同的 ID,所以这个 ID 在 SSR 时不会出现冲突。是一个非常有用的 Hook,可以帮助我们在 SSR 时避免 ID 冲突的问题。只能在函数组件中使用,不能在类组件中使用。原创 2024-07-05 12:24:33 · 201 阅读 · 0 评论 -
【React Hook】- useCallback
是 React 提供的一个 Hook,用于优化函数组件的性能。它返回一个记忆化的回调函数,只有在其依赖项发生变化时才会重新创建。这样可以避免在每次渲染时都创建新的函数,从而减少不必要的重新渲染。原创 2024-07-05 12:23:30 · 296 阅读 · 0 评论 -
【React Hook】- useMemo
是 React 提供的一个 Hook,用于优化性能,避免不必要的计算。计算函数会在依赖数组中的值发生变化时重新计算,否则会返回上一次计算的结果。是 React 提供的一个 Hook,用于优化性能,避免不必要的计算。它可以接受一个计算函数和一个依赖数组,计算函数会在依赖数组中的值发生变化时重新计算,否则会返回上一次计算的结果。例如,可以缓存一些复杂的计算结果,然后在需要时直接使用,而不是每次都重新计算。如果需要缓存 DOM 元素,可以使用。只能优化计算密集型的函数,对于简单的计算或者不需要优化的函数,使用。原创 2024-07-05 12:22:52 · 147 阅读 · 0 评论 -
【React Hook】- useReducer
reducer 函数是一个纯函数,它接受当前的状态和动作类型,并返回新的状态。是 React 提供的一种状态管理方式,它可以将状态逻辑集中在一个地方,使得代码更加清晰和可维护。同时,它也可以避免因为直接修改状态而导致的不可预测的行为。的优点是它可以将状态逻辑集中在一个地方,使得代码更加清晰和可维护。是 React 提供的一种状态管理方式,它类似于 Redux 的 reducer,用于处理复杂的状态逻辑。更加复杂,需要编写更多的代码。同时,它也可能会导致性能问题,因为每次状态更新都会触发组件的重新渲染。原创 2024-07-05 12:22:18 · 207 阅读 · 0 评论 -
【React Hook】- useContext
是 React 提供的一个 Hook,用于在函数组件中访问上下文(Context)的值。上下文(Context)是 React 提供的一种机制,用于在组件树中共享数据,而不必通过每一层组件手动传递 props。是 React 提供的一个非常有用的 Hook,可以帮助我们在函数组件中方便地访问和响应上下文的变化。Hook 还可以接受一个可选的参数,即上下文对象的默认值。Hook 返回的值是上下文对象的当前值,当上下文对象的值发生变化时,组件一起使用,用于提供上下文的值。在上面的例子中,我们使用。原创 2024-07-05 12:21:45 · 163 阅读 · 0 评论 -
【React Hook】- useEffect
在上面的示例中,useEffect 的依赖项数组为空,因此副作用函数只会在组件挂载时执行一次。在组件卸载时,我们可以在清理函数中取消数据获取的订阅。因此,如果副作用函数中包含一些副作用操作,例如数据获取、订阅事件等,需要确保这些操作是幂等的,即多次执行不会产生副作用。因此,如果需要在组件更新时清理副作用,可以在副作用函数中返回一个清理函数,并在清理函数中执行清理操作。总之,useEffect 是 React 中处理副作用的强大工具,可以帮助我们在函数组件中执行各种副作用操作,并在组件卸载时清理副作用。原创 2024-07-05 12:20:59 · 240 阅读 · 0 评论 -
【React Hook】- useState
是 React 提供的一个 Hook,用于在函数组件中添加状态。它接受一个初始状态作为参数,并返回一个数组,其中第一个元素是当前状态值,第二个元素是一个更新状态的函数。的初始状态可以是任何类型,包括对象和数组。当初始状态是一个对象或数组时,React 会使用浅比较来比较新旧状态,如果新旧状态相等,React 将不会重新渲染组件。的状态变量,并将其初始值设置为。在这个例子中,我们使用。原创 2024-07-05 12:19:02 · 194 阅读 · 0 评论