【React】设计高质量的React组件

内容大纲

划分组件边界的原则
React组件数据种类
React组件的生命周期

React应用将围绕着组件的设计展开，所以关于组件的设计至关重要。

设计易于维护的组件原则

任何一个复杂的应用，都是由一个简单的应用发展而来。

软件设计的通则：高内聚，低耦合。

在前端开发中，HTML负责页面显示，交互放在JS，样式放在CSS文件，从功能角度来说，模块划分明确，但是不满足高内聚的原则。

React则是天生高内聚，展示内容的JSX，定义行为的JS和样式CSS都可以放在一个JS文件中，目的都是为了实现一个功能模块。

至于低耦合，说的是不同组件之间的依赖关系需要弱化，保持系统的低耦合，这个需要程序员自己来把握，使用React提供的完善的对外接口，我们可以很容易设计出低耦合的系统。

React组件数据

主要分成两种：

prop：property，从外部传递给组件的数据
state

二者之一发生了改变，都会触发组件的重新渲染。所以，在有两种数据的情况下，如何选择呢？

答案是：对外用prop，对内用state。

组件需要定义自己能够接受的prop数据，组件之外的一切都是它的外部世界，外部世界需要通过prop与组件对话。

参考：

《深入浅出React和Redux》

【React】设计高质量的React组件相关推荐

【华为云技术分享】如何设计高质量软件-领域驱动设计DDD（Domain-Driven Design）学习心得
DDD做为软件设计方法于2004年提出,一直不温不火,最近几年突然火起来了,为啥呢?正所谓机会给有准备的人,因为微服务的流行,大家都跃跃欲试把传统单体软件转成微服务架构,但理论很丰满,现实很骨感,光是 ...
使用Formik轻松开发更高质量的React表单（一）入门
前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的,看到作者的高度肯定后我立即转到github上,正如许多朋友所关注的,Formik的星数达8282,这个数字在git ...
使用Formik轻松开发更高质量的React表单（二）使用指南
一个基本的例子设想你要开发一个可以编辑用户数据的表单.不过,你的用户API端使用了具有类似下面的嵌套对象表达: {id: string,email: string,social: {facebook ...
设计高质量的论文插图
研发总结笔记(个人理解):论文写作是一种研究笔记,我前段时间学会最多是总结汇报.人对事物的直观感受是图像比文字强. 因此论文的插图是论文被录一个指标,一般工学研究中的论文图为:模型图.数据图.结果图 ...
react 动态添加组件属性_这么高质量React面试题（含答案），看到就是赚到了！...
前言本文篇幅较长,全是干货,建议亲们可以先收藏慢慢看哦写文不易,欢迎大家一起交流,喜欢文章记得关注我点个赞哟,感谢支持! Q1 :什么是虚拟DOM? 难度::star: 虚拟DOM(VDOM)它是 ...
react学习—高阶组件HOC
高阶组件HOC 一.高阶组件HOC 1.高阶组件 2.属性传递 3.使用属性传递 4.注意一.高阶组件HOC HOF:Higher-Order Function, 高阶函数,以函数作为参数,并返回一 ...
React之高阶组件
React之高阶组件 React之高阶组件前言基本用法属性代理模式(Props Proxy) 通过ref访问组件实例反向继承(Inheritance Inversion) 总结 React之高 ...
React 之高阶组件的理解
1.基本概念高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
[react] 写一个react的高阶组件并说明你对高阶组件的理解
[react] 写一个react的高阶组件并说明你对高阶组件的理解定义高阶组件 import React, { Component } from 'react';const simpleHoc = ...

【React】设计高质量的React组件

内容大纲

设计易于维护的组件原则

React组件数据

【React】设计高质量的React组件相关推荐

最新文章

热门文章