深入理解react 组件类型及使用场景
函数组件vs类组件
函数组件(FunctionalComponent)和类组件(ClassComponent)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6class定义组件
//函数组件
functionWelcome(props){
returnHello,{props.name}
;
}
//类组件
classWelcomeextendsReact.Component{
render(){
returnHello,{this.props.name}
;
}
}
- 函数组件的写法要比类组件简洁，不过类组件比函数组件功能更加强大。函数组件更加专注和单一，承担的职责也更加清晰，它只是一个返回React元素的函数，只关注对应UI的展现。函数组件接收外部传入的props，返回对应UI的DOM描述，
- 类组件可以维护自身的状态变量，即组件的state，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。
无状态组件vs有状态组件
函数组件一定属于无状态组件（划分依据是根据组件内部是否维护state）
//无状态组件
classWelcomeextendsReact.Component{
render(){
returnHello,{this.props.name}
;
}
}
//有状态类组件
classWelcomeextendsReact.Component{
constructor(props){
super(props);
this.state={
show:true
}
}
render(){
const{show}=this.state;
return(
<>
{show&&Hello,{this.props.name}
}
)
}
}
展示型组件vs容器型组件
展示型组件(PresentationalComponent)和容器型组件(ContainerComponent)，划分依据是根据组件的职责。(展示型组件一般是无状态组件，不需要state)
classUserListContainerextendsReact.Component{
constructor(props){
super(props);
this.state={
users:[]
}
}
componentDidMount(){
varthat=this;
fetch('/path/to/user-api').then(function(response){
response.json().then(function(data){
that.setState({users:data})
});
});
}
render(){
return(
{props.users.map(function(user){
return(
{user.name}
);
})}
)
}
展示型组件和容器型组件是可以互相嵌套的，展示型组件的子组件既可以包含展示型组件，也可以包含容器型组件，容器型组件也是如此。例如，当一个容器型组件承担的数据管理工作过于复杂时，可以在它的子组件中定义新的容器型组件，由新组件分担数据的管理。展示型组件和容器型组件的划分完全取决于组件所做的事情。
总结
通过上面的介绍，可以发现这三组概念有很多重叠部分。这三组概念都体现了关注点分离的思想：UI展现和数据逻辑的分离。函数组件、无状态组件和展示型组件主要关注UI展现，类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同，它们并非完全等价的概念。它们之间的关联关系可以归纳为：函数组件一定是无状态组件，展示型组件一般是无状态组件；类组件既可以是有状态组件，又可以是无状态组件，容器型组件一般是有状态组件。
举个