React 无状态组件

当一个组件作为UI组件时，他只有Render函数。这时我们就可以把它写成无状态组件，以一个函数的形式作为一个组件，而非一个对象。

这样可以提升性能。

原UI组件：

class TodoListUI extends Component {
    render() {
        return (
            <Fragment>
                <Input
                    value={this.props.inputValue}
                    placeholder='What to do?'
                    style={{ width: '300px' }}
                    onChange={this.props.handleInputChange}
                />
                <Button
                    type="primary"
                    onClick={this.props.handleClickChange}
                >Primary Button</Button>
                <List
                    //这里使用antd的模板
                    bordered
                    style={{ marginTop: '10px', width: '300px' }}
                    dataSource={this.props.list}
                    renderItem={
                        (item, index) => {
                            return <List.Item
                                //这里要注意 箭头函数括号内不能加index，否则会改变index的指向，变成箭头函数内部的index，数值为undefined
                                onClick={() => { this.props.handleDeleteChange(index) }}
                            >{item}</List.Item>
                        }
                    }
                />
            </Fragment>
        )
    }
}

改良后的无状态组件

const TodoListUI = (props) => {
    return (
        <Fragment>
                <Input
                    value={props.inputValue}
                    placeholder='What to do?'
                    style={{ width: '300px' }}
                    onChange={props.handleInputChange}
                />
                <Button
                    type="primary"
                    onClick={props.handleClickChange}
                >Primary Button</Button>
                <List
                    //这里使用antd的模板
                    bordered
                    style={{ marginTop: '10px', width: '300px' }}
                    dataSource={props.list}
                    renderItem={
                        (item, index) => {
                            return <List.Item
                                //这里要注意 箭头函数括号内不能加index，否则会改变index的指向，变成箭头函数内部的index，数值为undefined
                                onClick={() => { props.handleDeleteChange(index) }}
                            >{item}</List.Item>
                        }
                    }
                />
            </Fragment>
    )
}