Redux学习之旅六：无状态组件

无状态组件只包含一个函数。使用无状态组件的原因是因为其没有state，可以省略生命周期函数，没有包含任何业务逻辑，性能比有状态组件要高。

能使用无状态组件尽量使用无状态组件。

在之前我们创建的TodoListUI中只包含了UI部分，可以改造为无状态组件，代码如下：

import React from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
const TodoListUI = (props)=>{
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input
                    placeholder={props.inputValue}
                    style={{ width: '250px', marginRight: '10px' }}
                    onChange={props.changeInputValue}
                    value={props.inputValue}
                />
                <Button
                    type="primary"
                    onClick={props.clickBtn}
                >
                    增加
                </Button>
            </div>
            <div style={{ margin: '10px', width: '300px' }}>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (
                        <List.Item
                            onClick={() => {
                                props.deleteItem(index)
                            }
                        }>
                            {item}
                        </List.Item>
                    )}
                />
            </div>
        </div>
    );
}

export default TodoListUI;

直接通过props接收传递过来的参数，没有继承Component父类。