react项目组件封装反思

最新推荐文章于 2024-08-06 10:26:24 发布
最新推荐文章于 2024-08-06 10:26:24 发布
阅读量372 收藏
点赞数
分类专栏： React基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyjingqi/article/details/113540817
版权

最近在做项目的迭代，需要改原来代码的逻辑，从中发现了一些问题，首先react开发就是要封装一个又一个的小组件，引入，并使用，当然自己在开发的过程中也遵循封装组件的方式，相比之前vue开发，自认为react封装的相对多一些，但是在迭代开发的过程中发现，自己只是对相对独立的小模块，小功能进行封装，像有的小功能点并没有很好的封装，并且也重复复制了很多功能在代码中，并没有达到封装组件的要求，导致回过头来看自己的代码时发现一堆重复的代码。往往功能做完再去封装组件，抽离出来，就比较费时费力了，还得思考一遍原来的逻辑。

我们要秉承“只要出现复制代码就着手封装”的思想来开发项目，提高组件复用性(可用性)，对数据和方法进行封装，封装组件时要注意一下方面：

  1. 组件是拿来用的：应该从使用者(程序员)的感受出发
  2. 没有"最好怎么做"：需要考虑项目的特点
  3. 好组件不是设计出来的，是改出来的：经常调整，有时还要重构
  4. 组件的功能应该单一、简单、尽可能低耦合，组件之间的依赖越小越好，不要试图把众多功能塞到一个组件中
  5. 最好从父级传入所需信息，不要在公共组件中请求数据，处理事件的方法写在父组件中
  6. 传入数据添加校验

最后分享一句励志短语：有智者立长志，无志者长立志～

samllplum
关注
专栏目录
Agent实战系列：快速自定义Agent在业务线落地：从入门到高级[实现tool串联、多轮对话、多Agent动态编排、静态编排等]
丨汀、的博客
08-10 122
Agent实战系列：快速自定义Agent在业务线落地：从入门到高级[实现tool串联、多轮对话、多Agent动态编排、静态编排等]
react组件封装
CSDNchaxundaima的博客
03-30 342
以一个form表单为例，我们现在要封装一个表单 这个表单代码如下： import React, { Component } from 'react' export default class formitem extends Component { constructor(props){ super(props) } render() { return ( <div> <for
React组件封装
最新发布
林靖焙的博客
08-06 206
react组件封装
React组件的封装
m0_46527751的博客
07-04 2517
使用 模态框 首先定义一个模态框组件的类，关于模态框内部的样式布局我们在这里面写 在父组件中定义控制模态框状态的，以及我们模态框中的标题内容等，在父组件中引入模态框组件时把模态框中需要的内容传入 在父组件中定义控制模态框显示状态的方法，如打开模态框，关闭模态框等，将关闭模态框的函数也传入子组件，在子组件中取消和关闭等组件的点击事件绑定我们传入的关闭模态框函数，实现模态框的打开和关闭 实现模态框打开关闭的过渡动画效果 全部CSS代码 模态框组件代码 主界面...
【REACT-组件封装1】
limuzhixing的博客
02-23 392
REACT-组件封装1
React封装组件（Button按钮和Modal模态框）
欢迎
12-01 2273
React封装组件（Button按钮和Modal模态框）
react 组件封装原则_React 组件封装
weixin_35643153的博客
01-14 680
初窥通过 create-react-app 构建的 React 工程，其中的 src 目录是我们关注的重点，它是我们编写代码的地方，我们现在需要做的，就是把里面的东西全部删除，然后一步步的尝试自己构建。首先我们创建一个 index.js 。// 导入依赖import React, { Component } from 'react';import ReactDOM from 'react-dom'...
React实战 Tree组件简单实现
qq_38164763的博客
07-06 5477
一、前言   这个简单树组件也是自己为了熟悉react而做的，所以只是简单实现了基本功能，但是做完之后感觉其中也有很多需要自己总结的地方。其中还有几个未解决的问题自己在解决之后会修改这篇博文。话不多少，首先来看看我们到底要实现什么效果 我们的目标很简单，就是实现这样一个功能就行了，但是注意需要有一个半勾选的状态，就是父节点的某个子结点被选中了，那么这个结点就是半勾选状态。 二、思路分析   当我...
封装Vue组件的一些技巧
weixin_44526331的博客
04-26 1738
写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。 本文整理了开发Vue组件的一些技巧，包含大量代码示例。 开发环境 vue-cli3提供了非常方便的功能，可以快速编写一些测试demo，是开发组件必备的...
超性感的React Hooks（九）useContext实践
fedlover的博客
12-02 713
如上图所示。 我们利用useContext来实现这个小demo。在实现之前，复习一下相关比较重要的知识点。 如下图。 1 如何合理的拆分组件？ 这是一个需要在实践中，不断去总结，优化才能获得的技能。 首先，将一个复杂的页面逻辑进行拆分的目的，一定是为了可读性和可维护性。如果你的组件拆分违背了这两个原则，那么拆分就有问题。 本来我想根据我自己的经验，将组件分为基础组件，工具组件，容器组件，页面组...
react-一个简单的甘特图React组件封装
08-15
一个简单的甘特图 React 组件封装
React 计时器案例(模块化_组件封装)
05-09
http://blog.csdn.net/liudao7994/article/details/71480235 有图
基于Echarts封装的react组件
08-10
因为echarts复杂的配置和繁多的api，出于简化和组件化原因，用react再做了一层封装，只对外部提供简单的配置接口。主要思想在于用最简单的配置完成所需要的图表，减少使用者了解echarts各个配置项的成本，替使用者做出最好的决定。
React Form组件的实现封装杂谈
12-01
前言 对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。 Form组件功能 一般来说，Form组件的功能包括以下几点： 表单布局 表单字段 封装表单验证&错误提示 表单提交 下面将对每个部分的实现方式做详细介绍。 表单布局 常用的表单布局一般有3种
react-icon:React的图标组件
05-04
React图标 React应用程序中图标的简单组件。 安装 npm install --save react-icon 用法 const React = require ( 'react' ) ; const Icon = require ( 'react-icon' ) ; const StarCounter = React . createClass ( { render ( ) { return ( < div> < span> This user have { this . props . count } < / span > < Icon xss=removed> < / div > ) ; } } ) ; module . exports = StarCounter ; 默认情况
Antd4 Form 实现思路及思考
TM_Godspeed的博客
07-03 758
实现简易 Antd4 Form
react 组件封装原则_React组件应该如何封装？
weixin_39586353的博客
02-21 622
翻译：刘小夕原文链接：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻...
React 学习之组件封装
旅行的风筝
01-10 994
本文用以记录在学习 React 过程种遇到的一些组件封装技巧。布局组件import Header from './Header'const layoutStyle = { margin: 20, padding: 20, border: '1px solid #DDD' }const Layout = (props) => ( <div style={layoutStyle}>
React Form组件封装实践与探讨
"React Form组件的实现封装杂谈" 在React开发中，Form组件的封装是提高代码复用性和可维护性的重要手段。本篇文章主要探讨了如何在React中实现一个功能完备的Form组件，包括表单布局、字段管理、验证机制以及提交...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值