react中的逻辑复用

最新推荐文章于 2024-04-05 16:19:21 发布
最新推荐文章于 2024-04-05 16:19:21 发布
阅读量636 收藏
点赞数
分类专栏： react 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aichixiangcaia/article/details/121301743
版权

 首先这是没有复用逻辑的样子,代码看起来很繁琐,而且不能复用

 所以为了实现复用,我们需要新建一个js文件,将相同的逻辑代码提取出来并默认导入

引入逻辑复用文件后的样子,这样就可以在任意一个逻辑相同的文件中实现复用

 比如验证码倒计时的文件中也可以如下图这样使用,只不过根据需求修改以下函数中第二个参数回调函数所执行的操作,因为验证码倒计时的效果是在倒计时结束后按钮恢复点击状态 

 

 

 

aichixiangcaia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 组件逻辑复用
weixin_42280395的博客
09-06 491
组件逻辑复用 React为什么设计成组件化的形式？其实最大的原因就是为了方便复用。 然而组件的复用虽然方便，逻辑的复用却很麻烦，因为state的存在，逻辑被锁死在组件内部，很难分离出去。 高阶组件（HOC)实现逻辑复用 import React from "react"; const Count = ({ count, add, minus, theme, changeTheme }) => { return ( <div style={{ backg.
React Hook丨真正的逻辑复用
mashibing_web的博客
12-03 892
说起逻辑复用，熟悉 react 小伙伴们一口道出了 HOC [高阶组件] 。没错，高阶组件可以实现逻辑复用，在 hook 之前 react 还有挺多不错的方案。那么，让我们来浅谈 HOC 与 自定义 hook。 HOC逻辑复用 说起HOC，我想到了两个标签： 1.【嵌套】 2.【一直嵌套】 让我们来深入场景，举个例子： 以封装一个 input 双向绑定为例 我们经常会这样去做一个双向绑定 // ... state = { value: 1 }; onChange = (e: any)
React的演变--逻辑复用
neoveee的博客
02-18 727
React 逻辑复用方案的演变
React逻辑复用的方案？
weixin_38099964的博客
05-13 387
React逻辑复用的方案？HOChooksrender props三者之间的差异 HOC HOC（高阶组件）类似于高阶函数，在使用高阶组件时，传入一个组件，会返回一个组件 withRouter:这个高阶组件的作用是复用传递给视图组件路由信息这个逻辑 使用方法 function Acmp(props){ const { history,location,match } = props return <div>视图</div> } const Bcmp = withRouter(
浅谈React中组件逻辑复用的那些事儿
11-20
基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢？本文将一一介绍 React 复用组件逻辑的几种方法，希望你读完之后能够有所收获。如果你对这些内容已经非常清楚，那么略过本文即可。 我已尽量对文中的代码和内容进行了校验，但是因为自身知识水平限制，难免有错误，欢迎在评论区指正。 1. Mixins Mixins 事实上是 React.createClass 的产物了。当然，如果你曾经在低版本的 react 中使用过 Mixins，例如 react-timer-mixin， react-addons-pure-render-mi
react-dataminrreactcomponents可复用React组件和常用函数集合
08-14
在标题提到的“react-dataminrreactcomponents”项目中，我们看到的是一个专门为Dataminr定制的React组件库，旨在为开发者提供一套高效、可复用的React组件和实用函数。 这个组件库，即“dataminr-react-components...
react模式中英文版本
05-12
8. **React Hooks**：React 16.8引入了Hooks，如`useState`、`useEffect`和`useContext`，使得在函数组件中也可以使用状态和生命周期方法，简化了代码结构，提高了代码复用。 9. **性能优化**：React模式中会介绍...
React中文文档.zip
08-13
生命周期方法是React组件的重要组成部分，它们允许在特定时间点执行特定的逻辑。例如，`componentDidMount`在组件被挂载到DOM后调用，`componentDidUpdate`在组件更新后调用，这些方法常用于数据获取或者DOM操作。 ...
React进阶-状态逻辑复用
m0_62118859的博客
05-02 784
目录 1.组件复用的说明 2. mixins 混入（已废弃） 3. 高阶组件 概述 基本使用 封装 withMouse 高阶组件 高阶组件的注意点 4.render-props 模式 基本使用 children 代替 render 属性 5. React Hooks 状态逻辑复用 6. 为什么要有 Hooks 7. 性能优化 8. 优化的方向 9.React.memo 浅对比的说明 10. useCallback 11. useMemo 12.class 组件优...
项目实战【vue，react，微信小程序】（1708E）
01-03
目录 一、Promise 二、swiper 三、$event 四、transition 过渡动画 五、toast组件 六、解构并不能实现对象的深拷贝 七、修改脚手架默认包管理工具 八、redux 九、react组件props类型检查和默认值 十、使用webpack搭建react开发环境 github源码： 一、Promise async函数会返回一个promise，并且Promise对象的状态值是resolved（成功的） //Promise基础用法 let pro = new Promise(resolve => { setTimeout(() => {
React组件复用的方式
WindrunnerMax
02-23 1930
React组件复用的方式 现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行为逻辑等)，复用起来却不那么容易，很难把状态逻辑拆出来作为一个可复用的函数或组件，实际上在Hooks出现之前，都缺少一种简单直接的组件行为扩展方式，对于Mixin、HOC、Render P
React16.8组件代码复用的4种方式
weixin_33691817的博客
05-24 545
在react项目开发中经常会遇到有一些代码复用的问题,现介绍几种常见的方式 一、直接把相同的代码复制一份到需要使用的组件中(非常low的方式) 二、创建一个高阶组件,将复用的代码存放到高阶组件中,需要使用的组件中直接复用 1、定义一个高阶组件 import React from 'react'; function withCounter(Component) { return cla...
技术分享 - React Native开发中使用高阶组件来复用逻辑
whathel的博客
11-26 1728
本文粗略介绍了一下高阶组件的概念 之后通过模拟开发“加权列表”这个功能， 介绍了传统开发方法和高阶方法的区别 并展示了高阶组件方法如何能够有效的实现逻辑复用，避免冗余代码。 并且使用compose方法灵活的组合逻辑来生成需要的组件
复用的理解
人不能两次走进同一条河流
06-13 7667
1.复用：在字面上理解是重复多次使用，而在代码层次上就是重复使用某个代码块， 这样能够大大减少我们的工作量的同时，并且能够减少维护时间，因为重复代表着 代码集中，功能点是星型发射状的，这样，我们只需要解决中心点则能够解决其他和 中心点关联的模块，这样我们能够大大减少维护的时间了。 2.代码复用方式：为了达到代码复用程度最大，我们会创建标准库，工具类，这些类都是 会被大部分代码多次
奇葩说框架之 react组件及逻辑复用
大转转FE
10-13 381
代码逻辑复用 是我们开发人员减少代码重复度，进行代码优化的一个重要因素，上期我们的同学分享了关于 Vue 框架的相关逻辑复用的方法及原理，本期我们一起来了解下 React 框架中的逻辑复用...
前端学习（2651）：逻辑复用方式
歌谣的博客
11-28 224
利用React 自定义Hooks实现业务逻辑复用实例(1)，资深web前端开发
最新发布
2401_84094908的博客
04-05 750
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
Vue3的逻辑复用
weixin_57653722的博客
05-13 1172
基础代码 <template> <div v-if="loadingRef">loading...</div> <div v-if="!loadingRef">list</div> </template> <script> import { onMounted, ref } from 'vue' export default { setup() { let loadingRef = ref(fals
react hook使用分享
10-13
首先，React Hooks 主要解决了逻辑复用的问题，使得组件直接的逻辑可以被更轻松地复用。在之前使用 class component 的时候，逻辑复用主要有两种方式，一种是通过 mixin，另一种是通过高阶组件（HOC）。而在使用这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值