React组件应该如何封装？_第1页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、react组件应该如何封装？原文的篇幅十分长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的react组件十分有协助。但由于篇幅实在太长，我对文章举行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够精确，假如您有更好的主意，欢迎在评论区指出。 封装 一个封装组件提供 props 控制其行为而不是裸露其内部结构。 耦合是打算组件之间依靠程度的系统特性。按照组件的依靠程度，可区别两种耦合类型： 当应用程序组件对其他组件知之甚少或一窍不通时，就会发生松耦合。 当应用程序组件知道彼此的许多具体信息时，就会发生紧耦合。 松耦合是我们设计应用结构和组件之间关

2、系的目标。 松耦合应用(封装组件) 松耦合会带来以下益处： 可以在不影响应用其它部分的状况下对某一块举行修改。、 任何组件都可以替换为另一种实现 在囫囵应用程序中实现组件复用，从而避开重复代码 自立组件更简单测试，增强了测试笼罩率 相反，紧耦合的系统会失去上面描述的益处。主要缺点是很难修改高度依靠于其他组件的组件。即使是一处修改，也可能导致一系列的依靠组件需要修改。 紧耦合应用(组件无封装) 封装 或 信息躲藏 是如何设计组件的基本原则，也是松耦合的关键。 信息躲藏 封装良好的组件躲藏其内部结构，并提供一组属性来控制其行为。 躲藏内部结构是须要的。其他组件没须要知道或也不依靠组件的内部结构或实

3、现详情。 react 组件可能是函数组件或类组件、定义实例办法、设置 ref、拥有 state 或用法生命周期办法。这些实现详情被封装在组件内部，其他组件不应当知道这些详情。 躲藏内部结构的组件彼此之间的依靠性较小，而降低依靠度会带来松耦合的益处。 通信 详情躲藏是隔离组件的关键。此时，你需要一种组件通信的办法：props。porps 是组件的输入。 建议 prop 的类型为基本数据（例如，string 、 number 、boolean）： ; 须要时，用法复杂的数据结构，如对象或数组： prop 可以是一个大事处理函数和异步函数： prop 甚至可以是一个组件构造函数。组件可以处理其他组件的实例化： function if( component: component, condition ) return condition ? : null; 为了避开破坏封装，请注重通过 props 传递的内容。给子组件设置 props 的父组件不应当裸露其内部结构的任何详情。例如，用法 props 传输囫囵组件实例或 refs 都是一个不好的做法。 拜访全局变量同样也会对封装产生负面影响。 案例讨论：封装修复 组件的实例和状态对象是封装在组件

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论