1. The splitting assembly
Split prerequisite components
When all the logic components present within a
Components can become very complicated inconvenience and maintenance code
Therefore, resolution of the components
IU page rendering components
The container assembly conducts a logic operation
Split UI components
Create a encapsulating TodoListUI.js TodoList render the split method for the UI component assembly
The remaining components of the container assembly 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;