React UI组件和容器组件

UI组件负责页面的渲染，容器组件负责页面的逻辑。

拆分TodoList中页面渲染部分的代码：

import React, { Component } from 'react';
import { Input, Button, List} from 'antd';

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

export default TodoListUI;

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List} from 'antd';
import store from './store/index.js';
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./store/actionTypes";
import {getInputChangeAction, getAddItemAction, getDeleteItemAction} from "./store/actionCreators";
import TodoListUI from './TodoListUI';

class ReduxTodoList extends Component{

    constructor(props) {
        super(props);
        this.state = store.getState();
        console.log( this.state);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        // this.handleItemClick = this.handleItemClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
        store.subscribe(this.handleStoreChange);
    }

    render() {
        return (
            <TodoListUI
             inputValue={this.state.inputValue}
             list = {this.state.list}
             handleInputChange={this.handleInputChange}
             handleBtnClick={this.handleBtnClick}
             handleItemDelete={this.handleItemDelete}
            />
        )
    }

    handleInputChange(e) {
        // const action = {
        //     type:CHANGE_INPUT_VALUE,
        //     value:e.target.value
        // }
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }

    handleStoreChange() {
        console.log("handleStoreChange");
        //替换当前组件中的数据
        this.setState(store.getState());
    }

    handleBtnClick() {
        const action = getAddItemAction();
        console.log('handleBtnClick ....');
        store.dispatch(action);
    }

    handleItemDelete(index) {
        //alert(index);
        const action = getDeleteItemAction(index);
        store.dispatch(action);
    }
}

export default ReduxTodoList;

TodoList中主要修改部分：
import TodoListUI from './TodoListUI';


render() {
    return (
        <TodoListUI
         inputValue={this.state.inputValue}
         list = {this.state.list}
         handleInputChange={this.handleInputChange}
         handleBtnClick={this.handleBtnClick}
         handleItemDelete={this.handleItemDelete}
        />
    )
}

容器组件也是逻辑组件，主要关注业务逻辑，不关注ui渲染。负责整个组件的功能实现的。所以也被称为聪明组件。

UI组件主要负责ui渲染。页面渲染相关的代码拆分到ui组件中。也称为傻瓜组件。

 

记录一个小错误

import {ADD_TODO_ITEM, CHANGE_INPUT_VALUE, DELETE_TODO_ITEM} from "./actionTypes";

export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
});

export const getAddItemAction = () => ({
    type:ADD_TODO_ITEM
});

export const getDeleteItemAction = (index) =>({
    type:DELETE_TODO_ITEM,
    index
})

第一个错误是在getDeleteItemAction中，这个action没有设置index，所以导致后面的reducer中获取不到index值。

import React, { Component } from 'react';
import { Input, Button, List} from 'antd';

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

                            <List.Item onClick={() =>{
                                console.log('index_click:' + index );
                                this.props.handleItemDelete(index);
                            }}>{item}</List.Item>)
                    }
                />
            </div>
        )
    }
}

export default TodoListUI;

修改2：应该使用最外层的index值，内层箭头函数中index是一个对象，而不是下标。

下面是正确代码：

 

 

下面是错误代码：

下面的写法index是有问题的。