Component 抽象和重复利用

本文通过国家、省、市、区的JSON数据示例,详细介绍了React中如何通过组件的封装与复用减少重复代码,提高开发效率。利用组件化的思想,实现了数据的逐级展示,并展示了不同层级组件的灵活调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概述:
React的Component目的是为复用,组成更加复杂的Component,类似java类的封装工具类,减少重复代码的编写
用国家省市区来进行举例说明:

1.普通情况不进行封装

//1.1.这是定义四级结构数据,其实就是json数据格式
const element= {
  nationName:'中国',
  province:{
    provinceName:'湖南',
    city:{
      cityName:'长沙',
      area:[
        {first:'雨花区',
        second:'开福区'}
      ]
    }
  }
};
//1.2.获取元素的数据,注意看都是.连字符运算,对于是数组用[索引(从0开始)]
function  GetArea(props){
  return <div>
    <h3>国家:{props.nationName}</h3>
    <h3>省:{props.province.provinceName}</h3>
    <h3>市:{props.province.city.cityName}</h3>
    <h3>区:{props.province.city.area[0].first}、{props.province.city.area[0].second}</h3>
      </div>
}

ReactDOM.render(
  //往里传入值(只要一级数据,也就是nationName 和 province)
  <GetArea  nationName={element.nationName}   province={element.province}/>,
  document.getElementById('root')
);

2.封装思想和抽象
  你会上面没有复用,只有一次使用当第二次使用的重写,从国家到区整个链条,是否很烦,而且不好维护

//1.1.这是定义四级结构数据,其实就是json数据格式
const element= {
  nationName:'中国',
  province:{
    provinceName:'湖南',
    city:{
      cityName:'长沙',
      area:[
        {first:'雨花区',
        second:'开福区'}
      ]
    }
  }
};
//国家里面调用省函数
function GetCountry(props){
  return <div>
        <h3>国家:{props.nationName}</h3>
        <GetProvince provinces = {props.province}/>
      </div>
};
//省里面调用市函数
function GetProvince(props){
  return <div>
        <h3>省:{props.provinces.provinceName}</h3>
        <GetCity citys = {props.provinces.city}/>
      </div>
};
//市函数调用区函数
function GetCity(props){
  return <div>
        <h3>城市:{props.citys.cityName}</h3>
        <GetArea areas = {props.citys.area}/>
      </div>
};

//获取区的信息
function GetArea(props) {
  return <div>
        <h3>地区:{props.areas[0].first}</h3>
        <h3>地区:{props.areas[0].second}</h3>
      </div>
};

ReactDOM.render(
  //如果我们只想查省以下信息,只需调用GetProvince函数
  <GetProvince   provinces={element.province}/>,
  document.getElementById('root')
);

总结:component是对element进一步封装,又可以component继续封装喜欢,封装成粗粒就可以直接复用,组装,达到一次编写多次使用。


### 什么是组件 在软件工程领域,**组件**是一个具有明确定义功能的模块化单元,通常可以在不同的应用程序或系统中重复使用。它既可以是独立的功能模块,也可以与其他组件协作完成更复杂的任务[^1]。 #### 组件的特点 - **独立性**:组件通常是自包含的,能够单独运行并提供特定的服务。 - **可重用性**:由于其模块化的特性,组件能够在多个项目中被多次利用。 - **接口清晰**:每个组件都定义了一组明确的输入输出接口,便于其他部分与其交互。 --- ### React 中的组件概念及其使用方法 在前端开发框架 React 中,组件是一种封装逻辑、状态以及 UI 的基本单位。通过将界面划分为一系列小型且独立的组件,开发者可以更容易地管理维护复杂的应用程序[^2]。 #### 创建 React 组件的方式 React 提供两种主要方式创建组件: 1. 函数式组件 (Functional Components) 使用 JavaScript 函数定义简单的无状态组件。 ```javascript const Greeting = () => { return <h1>Hello, world!</h1>; }; ``` 2. 类组件 (Class Components) 基于 ES6 Class 定义有状态的复杂组件。 ```javascript class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> Count: {this.state.count} <button onClick={() => this.setState({ count: this.state.count + 1 })}> Increment </button> </div> ); } } ``` #### 如何使用组件? 可以通过 JSX 将组件嵌套到父级组件或其他地方: ```javascript function App() { return ( <div> <Greeting /> <Counter /> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); ``` --- ### 设计模式中的组件应用 在面向对象的设计模式分类中,“结构型模式”专注于描述如何组合类对象以形成更大的结构。这类模式强调的是不同组件间的耦合关系,从而实现系统的灵活性与可扩展性[^3]。 例如,在 Composite 模式下,叶子节点代表最基础的操作单元(即简单组件),而容器则负责管理一组这样的叶子节点或者其它容器实例。这种层次化的组织形式允许我们将整个树形结构当作单一实体对待。 --- ### 软件架构视角下的组件思考 对于从事底层开发的技术人员来说,可能会觉得像 Java 或者 .NET 领域提到的各种高级抽象——诸如微服务架构、分层架构等离自己很遥远[^4]。但实际上,即使是嵌入式环境也存在类似的划分原则;只不过受限于硬件性能等因素影响,表现形式会有所不同罢了。 比如在一个基于 NVIDIA DRIVE 平台搭建自动驾驶解决方案的过程中,就需要按照官方文档指引设置好相关工具链,并合理规划各个子系统的职责边界[^5]。这里所说的每一个子系统实际上都可以看作广义意义上的“组件”。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值