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;