无状态组件

1.当一个组件中只有一个render函数的组件，就可以用一个无状态组件来定义这个组件，无状态组件就是一个函数。
2.现在我们把TodoListUI来定义 成一个无状态组件代码如下
//用函数来定义组件之前用的this.props前面都可以不用加this
const TodoListUI = (props) =>{
    return (
        <div style={{marginTop:100,marginLeft:500}}>
            <div>
            <Input placeholder="Todo info" value={props.inputValue} style={{width : 400,marginRight : 10}}
            onChange={props.handleChange}
           />
           <Button type="primary" onClick={props.handleAddList} >提交</Button>
            </div>
            <List
                style={{width : 400}}
                size="small"
                bordered
                dataSource={props.List}
                renderItem={(item,index) => (<List.Item  style={{position : "relative"}}>
                {item}
                <Icon
                 type="close-square" 
                 theme="twoTone" 
                 spin
                 style={{position : "absolute" , right : 15,top :12}} 
                 onClick={() => {props.handleDelet(index)}}
                 />
                </List.Item>)}
             />
             
        </div>
    )
}

3.无状态组件相对与普通的组件来说它的性能比较高，因为TodoListUI是一个函数之前TodoListUI是一个类函数的执行远远要比类的性能要高