概述:
React的Component目的是为复用,组成更加复杂的Component,类似java类的封装工具类,减少重复代码的编写
用国家省市区来进行举例说明:
总结:component是对element进一步封装,又可以component继续封装喜欢,封装成粗粒就可以直接复用,组装,达到一次编写多次使用。
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继续封装喜欢,封装成粗粒就可以直接复用,组装,达到一次编写多次使用。