UI组件和容器组件和无状态组件

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

容器组件TodoList.js

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

class TodoList extends Component{

    constructor(props){
        super(props);
        this.state=store.getState();
        this.handleInputChange=this.handleInputChange.bind(this);
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.handleStoreChange=this.handleStoreChange.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
        //store里面的数据只要发生改变，subscribe里面函数就会被自动的执=行
        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){
        // 去改变store里面的内容，首先要创建一句话，告诉store
        const action = getInputChangeAction(e.target.value);
        // 将这句话传递给store
        store.dispatch(action);
    }

    handleStoreChange(){
        //当感知到store的数据变化的时候，调用store.getState()方法，
        //从store里面重新取一次数据，然后调用setState替换当前组件里的数据
        // 这样组件里的数据，就和store里的数据同步了
       this.setState(store.getState());
    }

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

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

UI组件 TodoListUI.js

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;

无状态组件—>当我们的组件只有一个render函数的时候，就叫做无状态组件
无状态组件就是一个函数，
当一个普通的组件只有render函数的时候，可以用一个无状态组件，来替换普通组件
无状态组件的性能比较高，他就是一个函数，普通的组件，执行起来的东西远比函数来的多
当我们定义一个ui组件的时候，他只负责渲染页面，不去做任何逻辑操作的时候，这个时候ui组件我们都可以使用无状态组件来定义

但是这也不是绝对的，ui组件虽然理论上只负责页面的渲染，但是有的时候去做一些简单的逻辑，也是可以的，具体怎么做还是要通过需求来。

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

const TodoListUI = (props)=>{
	return (
		<div style={{marginTop:'10px',marginLeft:'10px'}}>
				<div>
					<Input 
					value={props.inputValue} 
					placeholder='todo info' 
					style={{width:'300px',marginRight:'10px'}}
					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.handleItemDelete(index)}}>{item}</List.Item>)}
				/>
		</div>
	)
}
export default TodoListUI;