React之UI组件、容器组件以及无状态组件

一：三种组件的简单理解

1.UI组件：只负责页面的渲染

2.容器组件：只负责业务逻辑和数据的处理

3.无状态组件：把UI组件用函数表示（可以省去生命周期函数，优化代码）

二：具体代码

       注意：以上一篇文章举例点击打开链接

        1.普通组件TodoList.js（拆分成TodoListUi.js(UI组件)和TodoList.js(容器组件)）

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

import {getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator'; 

class TodoList extends  Component{
    constructor(props){
        super(props);
        this.state=store.getState();
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return(
            <div style={{margin:'10px',marginLeft:'10px'}}>
                <div>
                    <Input
                        value={this.state.inputValue}
                        placehoder="todo list "
                        style={{width:'300px'}}
                        onChange={this.handleInputChange}
                    />
                    <Button
                        type= "primary"
                        onClick={this.handleBtnClick}
                    >提交</Button>
                </div>
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index) => (<List.Item onClick={this.handleItemDelet} >{item}</List.Item>)}//这个这个参考antd官网
                />
            </div>
        )
    }
    handleInputChange=(e)=>{
        const action=getInputChangeAction(e.target.value);
        store.dispatch(action);
    };

    handleStoreChange=()=>{
        this.setState(store.getState());   
    };

    handleBtnClick=()=>{
        
        const action=getAddItemActiom();
        store.dispatch(action);
    };

    
    handleItemDelet=(index)=>{
         
        const action=getDeleteItemAction(index);
        store.dispatch(action);
    }
}

export default TodoList;

    2：普通组件拆分成之一TodoListUi.js（UI组件）

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

class TodoListUi extends Component{
    render(){
        return(
            <div style={{margin:'10px',marginLeft:'10px'}}>
                <div>
                    <Input
                        value={this.props.inputValue}
                        placehoder="todo list "
                        style={{width:'300px'}}
                        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.handleItemDelet(index)}} >{item}</List.Item>)}
                    //调用父组件带参数的函数用箭头函数
                />
            </div>
        )
    }
}
export default TodoListUi;

    3：普通组件拆分成之二TodoList.js（容器组件）

import React ,{Component}from 'react';

import store from './store/index';

import {getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator';
import TodoListUi from './TodoListUi';


class TodoList extends  Component{
    constructor(props){
        super(props);
        this.state=store.getState();
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return(
            <TodoListUi
                inputValue={this.state.inputValue}
                list={this.state.list}
                handleInputChange={this.handleInputChange}
                handleBtnClick={this.handleBtnClick}
                handleItemDelet={this.handleItemDelet}
            />
        )
    }
    handleInputChange=(e)=>{
        const action=getInputChangeAction(e.target.value);
        store.dispatch(action);

    };


    handleStoreChange=()=>{
        this.setState(store.getState())
    };

    handleBtnClick=()=>{

        const action=getAddItemActiom();
        store.dispatch(action);
    };


    handleItemDelet=(index)=>{

        const action=getDeleteItemAction(index);
        store.dispatch(action);
    }
}

export default TodoList;

4：UI组件TodoListUi.js把类换成函数（无状态组件）

import React ,{Component}from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List} from 'antd'
const TodoListUi=(props)=>{
    return(
        <div style={{margin:'10px',marginLeft:'10px'}}>
            <div>
                <Input
                    value={props.inputValue}
                    placehoder="todo list "
                    style={{width:'300px'}}
                    onChange={props.handleInputChange}
                />
                <Button
                    type= "primary"
                    onClick={props.handleBtnClick}
                >提交</Button>
            </div>
            <List
                style={{marginTop:'10px',width:'300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item,index) => (<List.Item onClick={(index)=>{props.handleItemDelet(index)}} >{item}</List.Item>)}
                //调用父组件带参数的函数用箭头函数
            />
        </div>
    )
};


export default TodoListUi;