// 无状态组件
当组件只有一个render的时候,可以只返回一个函数,不需要再定义class类了,
无状态组件可以提升代码的性能,因为没有生成任何的生命周期函数
import React from 'react'
import { Input, Button,List } from 'antd';
无状态组件直接接受props参数,调用的时候:props.inputValue
而容器组件通过constructor(props)函数,调用的时候:this.props.inputValue
class Header extends Component{
// constructor(props){
// super(props);
// this.state={
// focused:false
// };
// this.handleInputFocus=this.handleInputFocus.bind(this);
// this.handleInputBlur=this.handleInputBlur.bind(this);
// }
render(){
let {focused,handleInputFocus,handleInputBlur}=this.props;
}
const TodoList2UI=(props)=>{
return (
<div style={{marginTop: '10px', marginLeft: '10px'}}>
<Input value={props.inputValue}
placeholder="Basic usage"
onChange={props.handleInputChange}
style={{width: '300px', marginRight: '10px'}}/>
<Button type="primary"
onClick={props.handleBtnClick}>Primary</Button>
<List
style={{marginTop: '10px', width: '300px'}}
size="small"
bordered
dataSource={props.list}
renderItem={(item,index) =>(
<List.Item onClick={(event)=>{
// console.log("event:",event.target);
props.handleDelItem(index)}
}>{item}</List.Item>)
}/>
</div>
)
}
export default TodoList2UI
---------------------
作者:pansuyong
来源:CSDN
原文:https://blog.csdn.net/pansuyong/article/details/82927598
版权声明:本文为博主原创文章,转载请附上博文链接!