首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从react组件中提取公共逻辑(但公共逻辑使用setState)

从React组件中提取公共逻辑可以通过以下几种方式实现:

  1. 使用高阶组件(Higher-Order Components,HOC):HOC是一个函数,接受一个组件作为参数,并返回一个新的组件。通过将公共逻辑封装在HOC中,可以在多个组件中共享该逻辑。在HOC中可以使用setState来管理状态。例如,可以创建一个名为withCommonLogic的HOC,将公共逻辑封装在其中,并返回一个新的组件。
代码语言:txt
复制
function withCommonLogic(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        // 公共逻辑使用的状态
      };
    }

    // 公共逻辑的其他方法

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 使用HOC包装组件
const MyComponent = withCommonLogic(MyComponent);
  1. 使用Render Props模式:Render Props是一种通过组件的props将逻辑共享给其他组件的技术。可以创建一个名为CommonLogic的组件,将公共逻辑封装在其中,并通过this.props.children将逻辑传递给其他组件。在CommonLogic组件中可以使用setState来管理状态。
代码语言:txt
复制
class CommonLogic extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 公共逻辑使用的状态
    };
  }

  // 公共逻辑的其他方法

  render() {
    return this.props.children(this.state);
  }
}

// 使用Render Props模式共享逻辑
const MyComponent = () => (
  <CommonLogic>
    {state => (
      // 使用共享的逻辑和状态
    )}
  </CommonLogic>
);

无论是使用HOC还是Render Props模式,都可以将公共逻辑封装在一个单独的组件中,并在需要使用该逻辑的组件中进行复用。这样可以提高代码的可维护性和复用性。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何实现React组件的鉴权功能

在前端项目开发过程,权限控制一般分为两个维度:页面级别和页面元素级别。 今天我们来聊一下在React项目中如何实现页面元素级别的鉴权功能。...前面有两篇文章分别介绍了React的高阶组件使用方法和React的Render Prop的使用方法,即各自优缺点。...: 第一步,我们将组件的通用逻辑提取到了高阶组件,通用逻辑指的是获取用户权限这部分代码。...https://react.docschina.org/docs/render-props.html 用大白话来讲,就是将组件的通用逻辑提取到一个公共组件,这个公共组件渲染的内容由其参数render...组件 */} List(prop)} /> ); } export default App; 阅读代码,我们将通用逻辑封装到了一个公共组件

2.9K30

三种React代码复用技术

React 代码复用 如何自己编写一个 react hook?react 允许我们自己编写 Hook。 场景 我们有几个组件,它们都要先进行 ajax 请求,获取到数据,然后把数据渲染到页面上。...我们完全可以将相同的部分提取到一个通用的地方。在 Hooks 出来之前,一般有两种提取公共代码的手段:HOC 高阶组件和 render-props。...高阶组件 如果要使用高阶组件的形式复用代码逻辑,就需要写一个函数,这个函数接收 React 组件作为参数,然后再返回一个新的 React 组件。...,render-props 也有一些缺点,比如如果 render 里渲染的数据也要使用 render-props 的方式渲染组件,就会出现多级嵌套。...Hook,只在最顶层使用 Hook; 只在 React 函数调用 Hook,不要在普通的 JavaScript 函数调用 Hook; 改造 App 组件内容: import React, { useState

2.3K10

超性感的React Hooks(六)自定义hooks的思维方式

组件化思维,一个完整的组件,包括了这份数据,以及这份数据在页面上的展示结果。因此这是不同的复用思维。 处理获取数据过程的公用逻辑,处理公用的登陆逻辑等。...针对逻辑片段的封装,在React发展历史的不同阶段,有不同的处理方案。面试的时候,许多面试官比较喜欢问这方面的问题。我们总结一下,各个阶段,分别都是如何处理的。...这篇文章中提到一个需求:某一个组件,需要跟踪鼠标的实时位置。例如拖拽,K线图,走马灯等场景都会需要用到这个逻辑片段。 Hooks 首先使用hooks,我们应该如何实现与运用?...render props的问题在于 1.可读性不高,直观上比较别扭。我们可以在Mouse组件处理很多额外逻辑,甚至定义更多的交互样式。因此使用时会造成一些困扰。2.存在局限性。...原则上来说,公共逻辑片段无论是在业务场景,还是在工具模块,都非常多。而React Hooks能够轻松解决在React环境逻辑片段封装。这是自定义hook的底层思维。

2K20

一天梳理完React所有面试考察知识点

,才会执行;Unmounting 组件卸载componentWillUnmount() : 当组件即将被页面剔除的时候,会被执行;生命周期简单使用场景使用shouldComponentUpdate(.../>组件公共逻辑的抽离Vue 的 mixin,已被 React弃用高阶组件 HOCRender Props高阶组件高阶组件不是一种功能,而是一种模式// 高阶组件...基本用法const HOCFactory = (Component) => { class HOC extends React.Component { // 在此定义多个组件公共逻辑...= { /* 这里 state 即多个组件公共逻辑的数据 */ } } /* 修改 state */ render () { return....多个组件公共逻辑如何抽离高阶组件 HOCRender Props11.react-router 如何配置懒加载上文中有...12.PureComponent 有何区别实现了浅比较的 shouldComponentUpdate

2.7K30

一天梳理完React面试考察知识点

,才会执行;Unmounting 组件卸载componentWillUnmount() : 当组件即将被页面剔除的时候,会被执行;生命周期简单使用场景使用shouldComponentUpdate(.../>组件公共逻辑的抽离Vue 的 mixin,已被 React弃用高阶组件 HOCRender Props高阶组件高阶组件不是一种功能,而是一种模式// 高阶组件...基本用法const HOCFactory = (Component) => { class HOC extends React.Component { // 在此定义多个组件公共逻辑...,提升渲染性能8.函数组件 和 class 组件区别纯函数,输入 props,输出JSX没有实力,没有生命周期,没有state不能扩展其它方法9.如何使用异步组件加载大组件React.lazyReact.Suspense10....多个组件公共逻辑如何抽离高阶组件 HOCRender Props11.react-router 如何配置懒加载上文中有...12.PureComponent 有何区别实现了浅比较的 shouldComponentUpdate

3.2K40

组件设计基础(1)

设计易于维护的组件 单一职责原则在react组件设计依然管用,尤其是维护一个大型的页面时。但也不是事无巨细都需要拆分。根据所谓"高内聚低耦合"的思想,逻辑紧密的组件是不适合拆分的。...react组件基础,应当时时复习。必要时自己写一写。 react组件react组件有很多种方法,es5下createClass在React16以后的版本全部废弃。...props 在React,prop(property的简写)是外部传递给组件的数据,一个React组件通过定义自己能够接受的prop就定义了自己的对外公共接口。...在ES6方法定义的组件,可以通过增加类的propTypes属性来定义prop规格,这不只是声明,而且是一种限制,在运行时和静态代码检查时,都可以根据propTypes判断外部世界是否正确地使用组件的属性...直接修改this.state的值,虽然事实上改变了组件的内部状态,只是野蛮地修改了state,却没有驱动组件进行重新渲染,既然组件没有重新渲染,当然不会反应this.state值的变化;而this.setState

41940

编写高质量可维护的代码:组件的抽象与粒度

本文接下来将以 React 为例进行相关描述。 组件的抽象 组件抽象的过程就是将通用性代码“提取”或是“抽取”出去的过程,那么问题来了,我们为什么要抽组件呢?...此时有两种情况: 一种是很多不同的项目间,可能存在类似的使用场景,因此会提炼出一个公共组件,为了复用。一般我们称之为基础组件或业务组件,姑且叫它公共组件吧。...公共组件和项目组件在设计上的侧重也有所不同,公共组件要更多的考虑通用性,通过一个组件满足不同项目中相似的使用场景,比如 AntD 基础组件库。...长此以往,新增的参数越来越多,组件内部开始出现大量的判断逻辑,尽管这个组件通用性很好,能应对各种页面展示逻辑这也使它本身变得逐渐难以维护。...: 一般当一个组件的 props (属性)或者 state (状态)发生改变的时候,也就是父组件传递进来的 props 发生变化或者使用 this.setState 函数时,组件都会进行重新渲染。

1.1K10

React高级特性解析

react conText 使用API React.createContext  返回的是组件对象 可以利用结构的方式 第一种方式 使用Provider包裹的组件都可以获取提供者的value Context.Consumer..., 需要挂载的节点) React.createPortal(Component, nodeElement) HOC 主要存在作用 抽离state 复用逻辑 操作方式可以直接使用ES7装饰器 对一个函数传入一个组件... 返回一个组件 函数里面将公共逻辑抽离出来 例如:每个页面都需要加载数据 渲染页面 那么就可以将公共的获取数据接口抽离出来 对指定组件进行渲染 hoc生命周期  组件的didMount -> hocDidMount... }) ref则会成为叶子组件的ref Fragments 主要是在代码逻辑对这些组件进行 不会产生任何的额外节点 <div...setState不会立马改变React组件和state的值 setState通过触发一次组件的更新来引发重绘 多次setState函数调用产生的效果会合并 本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处

89920

前端一面react面试题总结

组件上的数据无关的加载,也可以在constructor里做,constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错...如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 的 path 属性和当前地址的 pathname 来实现的。...、什么是高阶组件高阶组件不是组件,是 增强函数,可以输入一个元组件,返回出一个新的增强组件属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和方法到父组件,子组件只负责渲染数据,相当于设计模式里的模板模式...使用者的角度而言,很难使用体验上区分两者,而且在现代浏览器,闭包和类的性能只在极端场景下才会有明显的差别。所以,基本可认为两者作为组件是完全一致的。...而函数组件本身轻量简单,且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用,更能适应 React 的未来发展。diff算法如何比较?

2.8K30

Taro小程序跨端开发入门实战

为了让小程序开发更简单、高效,采用Taro作为首选框架,本文将分享Taro的实践经验,主要内容围绕什么是Taro以及Taro如何使用(正确使用的姿势),还有Taro背后的一些设计思想来展开,让读者能够对...(内含图标等资源) | ├── components 公共组件目录 | | └── Btn 公共组件...Btn 目录 | | ├── Btn.tsx 公共组件 Btn 逻辑 | | └── Btn.scss 公共组件...,可能不会更新状态,可以使用 tt-modal 代替; (7)图片裁剪,语音识别,打印功能等依赖原生 API 不支持; (8)状态更新从有到无需要显性设置 null ,例如将列表组件隐藏:this.setState...组件库的部分UI示例界面 定制化Taro模板工程 模板工程主要特性: 自带按需引入的 Tarot 组件库及组件使用示例; 自带 pandora-tools 的工具,如网关调用插件等; 登陆适配多端,

1.6K30

美团前端二面常考react面试题(附答案)

很多时候你会使用数据的 IDs 作为 keys,当你没有稳定的 IDs 用于被渲染的 items 时,可以使用项目索引作为渲染项的 key,这种方式并不推荐,如果 items 可以重新排序,就会导致...在React组件的this.state和setState有什么区别?this.state通常是用来初始化state的,this.setState是用来修改state值的。...React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件。...什么是高阶组件高阶组件不是组件,是 增强函数,可以输入一个元组件,返回出一个新的增强组件属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和方法到父组件,子组件只负责渲染数据,相当于设计模式里的模板模式...action到达store之前会走中间件,这个中间件会把函数式的action转化为一个对象,在传递给storeReact的严格模式如何使用,有什么用处?

1.2K10

React最佳实践

状态逻辑复用 在使用React Hooks之前,我们一般复用的都是组件,对组件内部的状态是没办法复用的,而React Hooks的推出很好的解决了状态逻辑的复用,而在我们日常开发能做到哪些状态逻辑的复用呢...在数据加载的时候,有这么几点是可以提取成共用逻辑的 loading状态复用 异常统一处理 const useRequest = () => { const [loading, setLoading]..., }; }; 除了上面示例的两个hook,其实自定义hook可以无处不在,只要有公共逻辑可以被复用,都可以被定义为独立的hook,然后在多个页面或组件使用,我们在使用redux,react-router...在合适场景给useState传入函数 我们在使用useState的setState的时候,大部分时候都会给setState传入一个值,实际上setState不但可以传入普通的数据,而且还可以传入一个函数...这时候就需要使用setState传入函数的方式了,如下代码: import { useState, useEffect } from 'react'; function App() { const

85350

React 获取数据的 3 种方法:哪种最好?

在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。 在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。...在获取请求完成后,使用 setState 方法来更新employees。 this.fetch()在componentDidMount()生命周期方法执行:它在组件初始渲染时获取员工数据。...Hooks 允许咱们组件提取雇员获取逻辑,来看看: import React, { useState } from 'react'; import EmployeesList...优点 声明式 Suspense 以声明的方式在React执行异步操作。 简单 声明性代码使用起来很简单,这些组件没有复杂的数据获取逻辑。...松耦合与获取实现 使用Suspense的组件看不出如何获取数据:使用 REST 或 GraphQL。Suspense设置一个边界,保护获取细节泄露到组件

3.5K20

关于前端面试你需要知道的知识点

props.children和React.Children的区别 在React,当涉及组件嵌套,在父组件使用props.children把所有子组件显示出来。...所以:constructor钩子函数并不是不可缺少的,子组件可以在一些情况略去。比如不自己的state,props获取的情况 对 React-Intl 的理解,它的工作原理?...面试题详细解答 React的严格模式如何使用,有什么用处?...高阶组件不是组件,是 增强函数,可以输入一个元组件,返回出一个新的增强组件 属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和方法到父组件,子组件只负责渲染数据,相当于设计模式里的模板模式...很多时候你会使用数据的 IDs 作为 keys,当你没有稳定的 IDs 用于被渲染的 items 时,可以使用项目索引作为渲染项的 key,这种方式并不推荐,如果 items 可以重新排序,就会导致

5.4K30

React 性能优化完全指南,将自己这几年的心血总结成这篇!

尽管 React Client Hooks 没有使用同一份代码, useCallback[11] 的代码逻辑和 useMemo[12] 的代码逻辑仍是一样的。...Render 过程 React 推荐将公共数据放在所有「需要该状态的组件」的公共祖先上,将状态放在公共祖先上后,该状态就需要层层向下传递,直到传递给使用该状态的组件为止。...图中可看出,优化后只有使用公共状态的组件 CompA 和 CompB 发生了更新,减少了父组件和 CompC 组件的 Render 次数。...在该场景,类组件使用 getDerivedStateFromProps[41] 钩子方法代替,函数组件使用函数调用时执行 setState[42]的方式代替。...那么如何定位是哪些组件状态更新导致的呢? 在 Profiler 面板左侧的虚拟 DOM 树结构,从上到下审查每个发生了渲染的(不会灰色的)组件

6.7K30

前端高频react面试题整理5

React Hooks 主要解决了以下问题:(1)在组件之间复用状态逻辑很难React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)解决此类问题可以使用 render props...尽管可以在 DevTools 过滤掉它们,这说明了一个更深层次的问题:React 需要为共享状态逻辑提供更好的原生途径。可以使用 Hook 组件提取状态逻辑,使得这些逻辑可以单独测试并复用。...Hook 使我们在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。(2)复杂组件变得难以理解在组件,每个生命周期常常包含一些不相关的逻辑。...为了解决这些问题,Hook 使你在非 class 的情况下可以使用更多的 React 特性。 概念上讲,React 组件一直更像是函数。...在React使用JSX)代码做什么?它叫什么?

91730
领券