文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React组件设计实践总结02 - 组件的组织

本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性. 系列目录 01 类型检查 02 组件的组织 03 样式的管理 04 组件的思维 05 状态管理 目录 1....组件的分类 1️⃣ 容器组件和展示组件分离 容器组件和展示组件分离是 React 开发的重要思想, 它影响的 React 应用项目的组织和架构....这些状态管理器通常都在组件树的外部维护一个或多个状态库, 然后通过依赖注入形式, 将局部的状态注入到子树中. 通过视图和逻辑分离的原则, 来维持组件树的纯净性....在实际的 React 开发中, 非受控组件的场景非常少, 我认为自定义组件都可以忽略这种需求, 只提供完全受控表单组件, 避免组件自己维护缓存状态 ---- 4....组件划分示例 我们一般会从 UI 原型图中分析和划分组件, 在 React 官方的Thinking in react也提到通过 UI 来划分组件层级: “这是因为 UI 和数据模型往往遵循着相同的信息架构

2K31
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React中的高阶组件

    描述 高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于JavaScript的高阶函数，高阶函数就是接受函数作为输入或者输出的函数，可以想到柯里化就是一种高阶函数，同样在React文档上也给出了高阶组件的定义...HOC在React的第三方库中很常见，例如Redux的connect和Relay的createFragmentContainer。...修改传入组件的HOC是一种糟糕的抽象方式，调用者必须知道他们是如何实现的，以避免与其他HOC发生冲突。HOC不应该修改传入组件，而应该使用组合的方式，通过将组件包装在容器组件中实现功能。...的diff算法使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新子树，如果从render返回的组件与前一个渲染中的组件相同===，则React通过将子树与新子树进行区分来递归更新子树，如果它们不相等...Enhance; } 除了导出组件，另一个可行的方案是再额外导出这个静态方法。

    3.8K10

    3、React组件中的this

    React组件的this是什么 通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this： import React from 'react'; const STR = '被调用...这段代码形象的验证了，JavaScript函数中的this不是在函数声明的时候，而是在函数运行的时候定义的； 同样，React组件也遵循JavaScript的这种特性，所以组件方法的‘调用者’不同会导致...- 面对如此混乱的场景，如果我们想在onClick中调用自定义的组件方法，并在该方法中获取组将实例，我们就得进行转换上下文即绑定上下文： 自动绑定和手动绑定 React.createClass有一个内置的魔法...，可以自动绑定所用的方法，使得其this指向组件的实例化对象，但是其他JavaScript类并没有这种特性； 所以React团队决定不再React组件类中实现自动绑定，把上下文转换的自由权交给开发者；...，即onClick={this.handler}打印出来的为组件实例； 总结： React组件生命周期函数中的this指向组件实例； 自定义组件方法的this会因调用者不同而不同； 为了在组件的自定义方法中获取组件实例

    2.9K10

    React 中的 dumb 组件和 smart 组件

    原文：https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43 当你开始起步学习 React，...很快就会接触到组件（Component）的概念，正是这一概念让 React 脱颖而出。...这种组件本身只有一个 render() 方法（他们也用不到其他的），并且总是表现为 Javascript 函数。不用维护内部 state，不用知道当收到请求时如何改变其展现的数据 - 无知便是福。...聪明的；巧妙的；敏捷的）组件有着不同的职责，也成为容器组件（container components）。因为背负了灵巧之名，它们必须得关注 state 并留意应用是如何工作的。...容器组件需要管理自身繁复的生命周期，并负责将数据作为 props，向下传递给展示型组件。 smart 组件是基于类的，并在 constructor() 函数中定义自身的 state。

    2.5K10

    如何优雅的设计 React 组件

    为了让组件“一次编写，随处使用”的原则，我们可以进一步拆分 TodoList 组件以满足其他组件的使用。 但是，如何拆分组件才是最合理的呢？...另外，从 Input 组件的示例代码中看到，我们使用了非受控组件，这里是为了降低示例代码的复杂度而特意为之，大家可以根据自己的实际情况来决定是否需要设计成受控组件。...我们回顾下 React 的生命周期，父组件传递到子组件的 props 的更新数据可以在 componentWillReceiveProps 中获取。...结尾 由于本人对 React 的了解有限，以上示例中的方案可能不一定最合适，但你也看到了 TodoList 组件，既可以是包含多个不同功能逻辑的大组件，也可以拆分为独立、灵巧的小组件，我觉得我们只需要掌握一个度...当然，如何设计取决于你自己的项目，正所谓：没有最好的，只有更合适的。还是希望本篇文章能给你带来些许的小收获。

    5.3K100

    如何在 React 组件中优雅的实现依赖注入

    一般这个概念在 Java 中提的比较多，但是在前端领域，似乎很少会提到这个概念，其实用好这个思想无论在前后端一样可以帮助我们的组件解耦，本文将介绍一下依赖注入在 React 中的应用。...另外，除了字面上所说的惰性，另外一个非常重要的功能就是允许你将 inversifyJs 集成到任何自己控制类实例创建的库或者框架，比如 React 。...inversify-react 是一个唯一执行依赖注入的库。...最后 React 生态系统中的许多流行库都在使用依赖注入，例如 React Router 和 Redux。...此外，React 还直接支持依赖注入。 但是，对于一些高级的用法，我们需要类似 InversifyJS 之类的库，选择一个适合你的库吧！希望本文能帮到你。

    5.7K41

    如何优雅的设计 React 组件

    为了让组件“一次编写，随处使用”的原则，我们可以进一步拆分 TodoList 组件以满足其他组件的使用。 但是，如何拆分组件才是最合理的呢？...另外，从 Input 组件的示例代码中看到，我们使用了非受控组件，这里是为了降低示例代码的复杂度而特意为之，大家可以根据自己的实际情况来决定是否需要设计成受控组件。...我们回顾下 React 的生命周期，父组件传递到子组件的 props 的更新数据可以在 componentWillReceiveProps 中获取。...结尾 由于本人对 React 的了解有限，以上示例中的方案可能不一定最合适，但你也看到了 TodoList 组件，既可以是包含多个不同功能逻辑的大组件，也可以拆分为独立、灵巧的小组件，我觉得我们只需要掌握一个度...当然，如何设计取决于你自己的项目，正所谓：没有最好的，只有更合适的。还是希望本篇文章能给你带来些许的小收获。

    4K00

    如何实现跨框架（React、Vue、Solid）的前端组件库？

    本文由 TinyVue 组件库核心成员郑志超分享，首先分享了实现跨框架组件库的必要性，同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。 前言 前端组件库跨框架是什么？...总之，前端组件库跨框架可以帮助开发者更加高效地开发和维护前端应用，提高产品的质量和用户体验。 如何开发 要实现前端组件库跨框架，需要使用一些技术手段。...组件库已具备同时兼容 Vue2 和 Vue3 的能力，所以本文以 React 和 Solid 为例，介绍如何开发一套复用现有 TinyVue 代码逻辑的跨框架组件库 首先开发 React 和 Solid...下面演示下如何开发一个跨框架的组件库 一、使用 pnpm 管理 monorepo 工程的组件库 1、创建 monorepo 工程文件夹，使用 gitbash 输入以下命令（以下所有命令均在 gitbase...下面以 React 框架及 Solid 框架为例详细介绍如何构造两个框架的 common 适配层（Vue 的原理可以类比） 1、在上文创建的 components 文件夹中创建 React 和 Solid

    1.5K10

    React 组件库都是怎么打包的？

    大家都用过组件库，react 流行的组件库有阿里的 ant-design、字节的 semi-design、arco-design 等。 那这些组件库都是怎么打包的呢？...我们自己写个组件库的话，怎么写打包逻辑呢？ 这篇文章我们就来探究下。...这就是 semi-design 的 esm、cjs、umd、scss 是如何编译打包的。 和 arco-design 的 scripts 区别大么？...并且在 package.json 里用 main、module、unpkg 来声明了 3 种规范的入口。 从产物上来看，三个组件库都是差不多的。 然后我们分析了下编译打包的逻辑。...并且编译任务都是用的 gulp 来组织的，它可以串行、并行的执行一些任务。 虽然有一些细小的差别，但从整体上来看，这三大组件库的编译打包逻辑可以说是一模一样的。 写这样的 scripts 麻烦么？

    1.2K10

    beeshell：开源的 React Native 组件库

    我们使用自上而下的方法，从体系结构开始进行 JS 组件部分的设计。 软件的体系结构的风格通常有 7 种：管道和过滤器，面向对象，隐式请求，层次化，知识库，解释程序和过程控制。...这样类似的组件还有很多，如何抹平平台的差异，实现跨平台？我们提出的方案是优先使用 JS 来实现功能，这也是我们组件库的设计原则。...一方面使用自己的样式变量重置 beeshell 的样式变量；另一方面在业务功能开发时，使用自己定义好的样式变量，从而保证整体 UI 的一致性。...通过校验功能独立实现，把校验信息输出到 Store 中，在需要的时候从 Store 中获取校验信息，可以更加精细化的控制元素的样式、位置与布局，兼容各种定制化需求。...那我们如何开发组件库？如何保证组件库的开发与使用的体验一致性？ 首先，我们需要一个 demo 项目，这个项目是 beeshell 组件库的开发环境，是一个 React Native 应用。

    1.9K10

    6个常用的React组件库

    轻松自定义； 它已经流行了足够长的时间了，因此不必担心错误 / 问题； 快速上手； 没有 jQuery 依赖，因为它已在 React 中完全重新实现。...你可以选择直接使用 Bulma 中的类，也可以使用包装库，例如 react-bulma-components。...fork： https://github.com/fomantic/Fomantic-UI 荣誉奖 Reach UI ReachUI 是一个底层组件库，允许开发人员在其设计系统中构建可访问的 React...没有可用的包大小，因为每个组件都单独导出为自己的 npm 包。 Reakit Reakit 是另一个底层组件库。从技术上讲它是一个 UI 库，但不附带 CSS。因此你仍然需要找到一种样式解决方案。...我还特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及实用工具 CSS 系统（如 Tailwind），因为它们不是明确的“React 组件库”，而是用来制作组件的工具

    2.2K10

    React基础(5)-React中组件的数据-props

    如何的划分组件的状态数据?...(property的简写),props就是组件定义属性的集合,它是组件对外的接口,由外部通过JSX属性传入设置(也就是从外部传递给内部组件的数据) 一个React组件通过定义自己能够接收的prop,就定义了自己对外提供的公共接口...这种间接操作的方式在React中非常重要.当然你看到上面把子组件与父组件放在一个文件当中,或许看得不是很舒服,你可以把子组件单独的抽离出去,通过Es6中的export,import导出导入的方式是可以的...下更多的方法,可参考官网手册PropTypes库的使用,也可以查看npm中的prop-types这个库的使用 出于性能的考虑,在开发的时候可以发现代码中的问题,但是放在生产坏境中就不适合了 因为它不仅增加了代码行数...bind的方式进行this手动绑定设置,具体详细内容可见上文 以及当知道如何定义组件中的prop数据,还有必要对外部组件传给内部组件的prop数据类型的校验,通过prop-types库来解决,PropTypes

    6.7K00

    React基础(6)-React中组件的数据-state

    React学习(6)-React组件中的数据-state.png 前言 组件中的state具体是什么?怎么更改state的数据? setState函数分别接收对象以及函数有什么区别？...如何划分组件的状态数据,进行自我的灵魂拷问,以及props与state的灵魂对比 那么本节就是你想要知道的 React中的state 一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态...要知道的 定义: setState方法是React中React.Component组件所提供的一个内置的方法,当你调用这个setState方法的时候,React会更新组件的状态state,并且重新调用render...其实它是会批量延迟更新 也就是props,state的值并不会立马的映射更新,它是把这个state对象放到一个更新队列里面,然后从队列当中把新的状态提出来合并到state中,最后在触发render函数组件的更新...,另一个是函数,以及这两种方式的区别,如何划分组件的状态数据,原则上是尽可能的减少组件的状态。

    6.1K00

    React学习(五)-React中组件的数据-props

    如何的划分组件的状态数据?...(property的简写),props就是组件定义属性的集合,它是组件对外的接口,由外部通过JSX属性传入设置(也就是从外部传递给内部组件的数据) 一个React组件通过定义自己能够接收的prop,就定义了自己对外提供的公共接口...这种间接操作的方式在React中非常重要.当然你看到上面把子组件与父组件放在一个文件当中,或许看得不是很舒服,你可以把子组件单独的抽离出去,通过Es6中的export,import导出导入的方式是可以的...,应该规范组件数据的如下方面 这个组件支持哪些prop 每个prop应该是什么样的格式 在React中,借助了第三方库prop-types来解决这一问题,通过PropTypes来支持这一功能 命令行终端下...bind的方式进行this手动绑定设置,具体详细内容可见上文 以及当知道如何定义组件中的prop数据,还有必要对外部组件传给内部组件的prop数据类型的校验,通过prop-types库来解决,PropTypes

    3.4K30

    React学习(六)-React中组件的数据-state

    如何划分组件的状态数据,进行自我的灵魂拷问,以及props与state的灵魂对比 那么本节就是你想要知道的 React中的state 一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态...,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示 在React中,因为不能直接修改外部组件传入的prop值 当需要记录组件自身数据变化时...其实它是会批量延迟更新 也就是props,state的值并不会立马的映射更新,它是把这个state对象放到一个更新队列里面,然后从队列当中把新的状态提出来合并到state中,最后在触发render函数组件的更新...DOM节点的更新,如果前后JSX元素不相等,那么React才会更新DOM 如果props或者state能被直接被修改,将会破坏组件复用的原则,会出现一些莫名其妙的bug 如何划分组件的状态数据 无论是props...结语 本文主要讲述了React组件中的数据属性-state,它是组件内部的状态,是一私有的变量,用于记录组件内部状态,由于props不可修改,通过React中内置提供setState方法修改state

    3.6K20

    React 中的受控组件和非受控组件

    受控组件用来在 React 中也保存该状态，比如同步到渲染输入元素的组件、树结构中的某个父组件，或者一个 flux store 中。 而这种模式可以被扩展至特定的非 DOM 状态相关的用例中。...比如，在最近的一个应用中，我需要创建一个可嵌套的 Collapsible 折叠组件，支持两种操作模式：某些情况下需要使其被外界可控（当应用中的其他区域发生用户交互时扩展开），其他时候它能简单的自己管理状态就可以了...React 中的 Inputs 对于 React 中的 Inputs，是这样工作的： 要创建一个非受控 input，要设置一个 defaultValue 属性。...封装 对于使你自己的组件同时支持可控/非可控行为这一点上，你应该能明白这是简单而很可能有用的。希望你能清楚的理解为什么需要用这种方式构建组件，并且也知道如何去做。...* 基于其 `collapsed` 属性，被包装的组件可以决定如何渲染。

    2.7K20

    如何组织PHP中的异常

    写这篇文章的目的是探讨一些在实际中怎么使用异常的方式，也希望得到大家的反馈，大家平时在开发中是怎么使用异常的？如何组织的。 为什么还使用异常？...你可以看到函数是如何工作的，同时也可以看到失败时候是怎么处理的。另外，现在可以提供更多的异常发生的上下信息，帮助你从发生的异常中恢复出来。...举个例子：当从数据库中获取一条记录的时候发生了异常，我们可以根据异常的不同类型，采取不同的结果。...通过SPL来构建异常 Standard PHP Library (SPL) 标准库中提供了一些predefined set of exceptions，我们可以基于这些预定于的异常进行扩展，得到满足我们自己需求的代码...组件级别的异常 当我们提供一个库给别人使用的时候，我们可能希望能够捕获我们库级别的异常，这通过一个模式Marker Interface可以实现： namespace App\Domain\Exception

    1.4K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券