15. react UI组件和容器组件的拆分 及 无状态组件
1.组件的拆分
组件拆分的前提
当所有的逻辑都出现在一个组件内时
组件会变得非常复杂 不便与代码的维护
所以对组件进行拆分
IU组件 进行页面渲染
容器组件 进行逻辑操作
UI组件的拆分
新建一个 TodoListUI.js 将 TodoList 组件的 render 方法进行拆分封装为 UI 组件
其余的 TodoList 组件为 容器组件
# TodoListUI.js
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Button , Input, List } from 'antd';
class TodoListUI extends Component{
render(){
return (
<div style={{paddingTop:'10px', paddingLeft : '10px'}}>
<div>
<Input style={{width: '300px', marginRight: '10px'}} onChange={this.props.getInputValue} placeholder='请输入'/>
<Button type="primary" onClick={this.props.addItem}>提交</Button>
</div>
<div>
<List
style={{width: '300px', marginTop: '10px'}}
bordered
dataSource={this.props.list}
renderItem={(item, key) => <List.Item index={key} onClick={this.props.delItem}>{item}</List.Item>}
/>
</div>
</div>
);
}
}
export default TodoListUI;
# TodoList.js
import React , {Component} from 'react';
import store from './store';
import TodoListUI from './TodoListUI';
class TodoList extends Component
{
constructor(props){
super(props);
this.state = store.getState();
this.addItem = this.addItem.bind(this);
this.delItem = this.delItem.bind(this);
this.getReduxState = this.getReduxState.bind(this);
this.getInputValue = this.getInputValue.bind(this);
store.subscribe(this.getReduxState);
}
getReduxState(){
this.setState(store.getState());
}
getInputValue(e){
const action = {
type : 'input_value_change',
value : e.target.value
}
store.dispatch(action);
}
addItem(){
const action = {
type : 'add_item',
value : this.state.inputValue
}
store.dispatch(action);
}
delItem(e){
const action = {
type : 'del_item',
value : e.target.getAttribute('index')
}
store.dispatch(action);
}
render(){
return (
<TodoListUI
getInputValue={this.getInputValue}
addItem={this.addItem}
delItem={this.delItem}
list={this.state.list}
/>
);
}
}
export default TodoList;
2. 无状态组件
当一个组件只有一个 render 函数的时候 便可以用一个无状态组件替换普通的组件
无状态组件的 性能比较高
无状态组件就是一个函数
不需要执行类似于类一样的钩子函数
将 TodoListUI.js 写成无状态组件
# TodoList.js
import React from 'react';
import 'antd/dist/antd.css';
import { Button , Input, List } from 'antd';
const TodoListUI = (props)=>{
return (
<div style={{paddingTop:'10px', paddingLeft : '10px'}}>
<div>
<Input style={{width: '300px', marginRight: '10px'}} onChange={props.getInputValue} placeholder='请输入'/>
<Button type="primary" onClick={props.addItem}>提交</Button>
</div>
<div>
<List
style={{width: '300px', marginTop: '10px'}}
bordered
dataSource={props.list}
renderItem={(item, key) => <List.Item index={key} onClick={props.delItem}>{item}</List.Item>}
/>
</div>
</div>
)
}
export default TodoListUI;
