UI组件的优化

因为TodoListUI中只有render一个函数，我们可以进行如下优化，将其写成一个箭头函数的形式，并且传入参数props，并且将之前的this.props替换成props

import React, { Component } from 'react';
import { Input, Button, List } from 'antd';
const TodoListUI = (props) =>{
        return (
            <div style={{ marginTop: '10px', marginLeft: '10px' }}>
                <div>
                    <input
                        value={props.inputValue}
                        placeholder='输入框'
                        style={{ width: '300px', marginRight: '5px' }}
                        onChange={props.handleInputChange}
                    />
                <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
            </div>
            <List style={{marginTop:'10px', width:'300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item ,index)=> (<List.Item onClick={(index)=>{props.handleItemDelete(index)}}>{item}</List.Item>)}
                />
          </div>
        )
    }