Redux初级2

业务和组件UI分离

// ####TodoList.js
    render() {
        return (<TodoListUI
            inputValue={this.state.inputValue}
            list={this.state.list}
            changeInputValue={this.changeInputValue}
            clickBtn={this.clickBtn}
            deleteItem={this.deleteItem}
        />)
    }
// ####TodoListUI.js
render() {
    return (
        <div style={{ margin:'10px' }}>
            <div>
                <Input
                    placeholder={this.props.inputValue}
                    style={{ width:'250px', marginRight:'10px' }}
                    onChange={this.props.changeInputValue}
                />
                <Button
                    type="primary"
                    onClick={this.props.clickBtn}
                >增加</Button>
            </div>
            <div style={{ marginTop:'10px', width:'300px' }}>
                <List
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item,index)=>(<List.Item onClick={this.props.deleteItem.bind(this, index)}>{item}</List.Item>)}
                />
            </div>
        </div>
    );
}

在UI层通常用无状态组件（一个函数），性能更好，不用继承

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