Redux-用Redux来完成ToDoList(5) _无状态组件

***无状态组件***其实就是一个函数，它不用再继承任何的类（class），当然如名字一样，也不存在state（状态）。因为无状态组件其实就是一个函数（方法）,所以它的性能也比普通的React组件要好。

// import React, { Component } from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List } from 'antd'

const ToDoListUi=(props)=>{   
    return ( 
        <div>
            <Input 
                placeholder={props.inputValue} 
                style={{width:'250px'}}
                value={props.inputValue}
                onChange={props.inputChangeValue}
            />
            <Button type="primary" onClick={props.btnClick}>添加游戏</Button>
            <List
                bordered
                dataSource={props.list}
                renderItem={(item,index) => (
                    <List.Item onClick={()=>{props.deleteItem(index)}}>{item}</List.Item>
                )}
            />
        </div>
        );
    
}
// class ToDoListUi extends Component {
   
//     render() { 
//         return ( 
//             <div>
//                 <Input 
//                     placeholder={props.inputValue} 
//                     style={{width:'250px'}}
//                     value={props.inputValue}
//                     onChange={props.inputChangeValue}
//                 />
//                 <Button type="primary" onClick={props.btnClick}>添加游戏</Button>
//                 <List
//                     bordered
//                     dataSource={props.list}
//                     renderItem={(item,index) => (
//                         <List.Item onClick={()=>{props.deleteItem(index)}}>{item}</List.Item>
//                     )}
//                 />
//             </div>
//          );
//     }
// }
 
export default ToDoListUi;