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;