Component 抽象和重复利用

最新推荐文章于 2025-05-13 08:30:00 发布

原创最新推荐文章于 2025-05-13 08:30:00 发布 · 716 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React #React 前端框架 JSX #函数 #component #抽象

React 专栏收录该内容

13 篇文章

订阅专栏

本文通过国家、省、市、区的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继续封装喜欢，封装成粗粒就可以直接复用，组装，达到一次编写多次使用。