react中的组件类型

1：UI组件和容器组件

• 容器组件：专门写逻辑的组件，里面没有UI结构，俗称聪明组件
  

• UI组件：专门写结构的组件，里面没有逻辑，逻辑都是从容器组件传过来的，俗称傻瓜组件
  

2:无状态组件

无状态组件：就是一个函数组件，接收props，没有state，只渲染dom结构，当一个普通组件只有一个render函数的时候，就可以写成一个无状态组件,上文的UI组件就可以改成一个无状态组件。

• 优点：性能比较高，因为他只是一个函数，普通组件是一个类，里面有好多个生命周期函数，执行的东西要比函数执行的东西多，所以他性能比较高
  例如下面代码就可以写成一个无状态组件，因为它只有render函数
  
  无状态组件代码：

	import React from 'react'
	import { Input,Button,List  } from 'antd'
	// 这是一个UI组件，是放结构的地方
	const AntdToDoListUI = (props) =>{
	  return (
	    <div>
	      <div className="flex">
	          <Input placeholder="请输入内容"  value={props.defalutValue} style={{width:300,margin:20}} onChange={props.handelChangeInput}/>
	          <Button type="primary" style={{marginTop:20}} onClick={props.handelList}>提交</Button>
	      </div>
	      <List
	        style={{width:300,marginLeft:20}}
	        size="small"
	        bordered
	        dataSource={props.list}
	        renderItem={(item,index) => <List.Item onClick={(index)=>{props.deleteItem(index)}}>{item}</List.Item>}
	      />
	    </div>
	    
	  )
	}