React中UI组件与容器组件的拆分

       本篇文章，我们接着对React组件进行优化。React中存在UI组件和容器组件的概念。顾名思义，UI组件主要控制组件的显示，并不是与过多的逻辑耦合，容器组件中实现一些具体的逻辑，引入UI组件作为其子组件，将子组件（UI组件）需要的一些数据通过组件间传值的方式方式传递到UI组件，进行数据的渲染。
       下面，我们就对我们之前实现TodoList的应用拆分。如果您没有关注过之前的代码，也没有关系。相信通过我上面的说明，你已经能搞清楚我上面所说的呢！

容器组件TodoList.js

import React, { Component } from 'react'
import store from './store'
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreator'
import 'antd/dist/antd.css';
import TodoListUI from './TodoListUI'

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state = {
            list: [],
            inputValue: ''
        }
        this.setState({
            list: store.getState().list,
            inputValue: store.getState().inputValue
        })
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleAddItem = this.handleAddItem.bind(this)
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return (
            <TodoListUI
                value={this.state.inputValue}
                list={this.state.list}
                handleInputChange={this.handleInputChange}
                handleAddItem={this.handleAddItem}
                handleItemDelete={this.handleItemDelete}/>
        )
    }
    handleStoreChange(){
        this.setState(store.getState())
    }
    handleInputChange(e){
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
    }
    handleAddItem(){
        const action = getAddItemAction()
        store.dispatch(action)
    }
    handleItemDelete(index){
        const action = getDeleteItemAction(index)
        store.dispatch(action)
    }
}
export default TodoList

       上面这段代码的重点是下面的这段代码。

<TodoListUI
       value={this.state.inputValue}
       list={this.state.list}
       handleInputChange={this.handleInputChange}
       handleAddItem={this.handleAddItem}
       handleItemDelete={this.handleItemDelete}/>

UI组件

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

class TodoListUI extends Component{
    render(){
        return (
            <div style={{marginTop:'10px',marginLeft:'10px'}}>
                <div>
                    <Input 
                    value={this.props.inputValue} 
                    placeholder="TodoList" 
                    onChange={this.props.handleInputChange}
                    style={{width:'300px'}}/>
                    <Button 
                    onClick={this.props.handleAddItem}
                    type="primary">提交</Button>
                </div>
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    size="small"
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item) => <List.Item onClick={(index) => {this.props.handleItemDelete(index)}}>{item}</List.Item>}
                    />
            </div>
        )
    }
}

export default TodoListUI

       如果一个组件中只有render函数，那么这个组件我们称之为无状态组件。无状态组件可以改写成函数形式。

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

const TodoListUI = (props) => {
    return (
        <div style={{marginTop:'10px',marginLeft:'10px'}}>
            <div>
                <Input 
                value={props.inputValue} 
                placeholder="TodoList" 
                onChange={props.handleInputChange}
                style={{width:'300px'}}/>
                <Button 
                onClick={props.handleAddItem}
                type="primary">提交</Button>
            </div>
            <List
                style={{marginTop:'10px',width:'300px'}}
                size="small"
                bordered
                dataSource={props.list}
                renderItem={(item) => <List.Item onClick={(index) => {props.handleItemDelete(index)}}>{item}</List.Item>}
                />
        </div>
    )
}

export default TodoListUI