react入门系列之如何拆分ui组件和容器组件

###如何拆分ui组件和容器组件

- ui组件-傻瓜组件-页面渲染

- 容器组件-聪明组件-页面逻辑

- 我们现看看原来组件

  1 /**
  2 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store）
  3 */
  4 
  5 import React, { Component, Fragment }from 'react';
  6 import { Input, Button, List, message } from "antd";
  7 import store from './store'; // 引入图书管理员 store
  8 // 引入action
  9 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
 10 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
 11 import "antd/dist/antd.css";
 12 class App extends Component {
 13 constructor(props){
 14 super(props)
 15 this.state = store.getState()
 16 console.log(store.getState())
 17 this.handleInputChange = this.handleInputChange.bind(this);
 18 this.addTodoList = this.addTodoList.bind(this);
 19 this.handleStroeChange = this.handleStroeChange.bind(this);
 20 // this.deletTodoList = this.deletTodoList.bind(this);
 21 store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化
 22 }
 23 
 24 render() {
 25 return (
 26 <Fragment>
 27 <div style={{ marginTop: '10px', marginLeft: '10px'}}>
 28 <Input
 29 placeholder='todo-list'
 30 style={{width: '300px', marginRight: '10px'}}
 31 onChange = { this.handleInputChange }
 32 value = { this.state.inputValue }
 33 />
 34 <Button
 35 type="primary"
 36 onClick = { this.addTodoList }
 37 >提交</Button>
 38 </div>
 39 <List
 40 style={{width: '300px', marginLeft: '10px', marginTop: '5px'}}
 41 size="large"
 42 bordered
 43 dataSource={ this.state.list ? this.state.list : null }
 44 renderItem={ (item, index) => <List.Item style={{position:'relative'}}>
 45 {item}
 46 <Button
 47 type='danger'
 48 style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
 49 onClick={ this.deletTodoList.bind(this, index) }
 50 >删除</Button>
 51 </List.Item>}
 52 />
 53 </Fragment>
 54 );
 55 }
 56 handleInputChange(e) {
 57 /*
 58 const action = {
 59 type: CHANGE_INPUT_VALUE, // 借什么书
 60 value: e.target.value
 61 }
 62 */
 63 const action = getInputChangeValue(e.target.value)
 64 store.dispatch(action); // 传达给store
 65 console.log(e.target.value)
 66 }
 67 // 添加
 68 addTodoList() {
 69 /*
 70 if (this.state.inputValue) {
 71 const action = {
 72 type: CHANGE_LIST_VALUE,
 73 item: this.state.inputValue
 74 }
 75 store.dispatch(action)
 76 } else {
 77 message.warning('请输入内容');
 78 }
 79 */
 80 if (this.state.inputValue) {
 81 const action = getAddTodoListValue(this.state.inputValue)
 82 store.dispatch(action)
 83 } else {
 84 message.warning('请输入内容');
 85 }
 86 }
 87 // 删除
 88 deletTodoList(index) {
 89 /*
 90 const action = {
 91 type: DELETE_LIST_VALUE,
 92 value: index
 93 }
 94 */
 95 const action = getDeletTodoListValue(index)
 96 store.dispatch(action)
 97 }
 98 handleStroeChange() {
 99 this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件）
100 }
101 }
102 
103 export default App;

- 接下来我们本原组件的html部分（render函数的内容）拆分到单独一个组件

- 原来的数据方法都是通过props获取

- render函数中的jsx语法不能直接在函数中传递参数，但是可以使用箭头函数

 1 import React, { Component, Fragment }from 'react';
 2 import { Input, Button, List } from "antd";
 3 
 4 class AppUi extends Component {
 5 render() {
 6 return (
 7 <Fragment>
 8 <div style={{ marginTop: '10px', marginLeft: '10px'}}>
 9 <Input
10 placeholder='todo-list'
11 style={{width: '300px', marginRight: '10px'}}
12 onChange = { this.props.handleInputChange }
13 value = { this.props.inputValue }
14 />
15 <Button
16 type="primary"
17 onClick = { this.props.addTodoList }
18 >提交</Button>
19 </div>
20 <List
21 style={{width: '300px', marginLeft: '10px', marginTop: '5px'}}
22 size="large"
23 bordered
24 dataSource={ this.props.list ? this.props.list : null }
25 renderItem={ (item, index) => (<List.Item style={{position:'relative'}}>
26 {item}
27 <Button
28 type='danger'
29 onClick= {() => {this.props.deletTodoList(index)}}
30 style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
31 >删除</Button>
32 </List.Item>)}
33 />
34 </Fragment>
35 )
36 }
37 }
38 
39 export default AppUi

- 原组件剩下的都是逻辑代码，编程了容器组件

- 将ui组件引入原组件

- 并且给ui组件中传递他所需要的props

 1 /**
 2 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store）
 3 */
 4 
 5 import React, { Component }from 'react';
 6 import { message } from "antd";
 7 import store from './store'; // 引入图书管理员 store
 8 import AppUi from './AppUi';
 9 // 引入action
10 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
11 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
12 import "antd/dist/antd.css";
13 class App extends Component {
14 constructor(props){
15 super(props)
16 this.state = store.getState()
17 console.log(store.getState())
18 this.handleInputChange = this.handleInputChange.bind(this);
19 this.addTodoList = this.addTodoList.bind(this);
20 this.handleStroeChange = this.handleStroeChange.bind(this);
21 this.deletTodoList = this.deletTodoList.bind(this);
22 store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化
23 }
24 
25 render() {
26 return (
27 <AppUi
28 inputValue = {this.state.inputValue}
29 handleInputChange = {this.handleInputChange}
30 deletTodoList = {this.deletTodoList}
31 addTodoList = {this.addTodoList}
32 list = {this.state.list}
33 />
34 )
35 }
36 handleInputChange(e) {
37 /*
38 const action = {
39 type: CHANGE_INPUT_VALUE, // 借什么书
40 value: e.target.value
41 }
42 */
43 const action = getInputChangeValue(e.target.value)
44 store.dispatch(action); // 传达给store
45 console.log(e.target.value)
46 }
47 // 添加
48 addTodoList() {
49 /*
50 if (this.state.inputValue) {
51 const action = {
52 type: CHANGE_LIST_VALUE,
53 item: this.state.inputValue
54 }
55 store.dispatch(action)
56 } else {
57 message.warning('请输入内容');
58 }
59 */
60 if (this.state.inputValue) {
61 const action = getAddTodoListValue(this.state.inputValue)
62 store.dispatch(action)
63 } else {
64 message.warning('请输入内容');
65 }
66 }
67 // 删除
68 deletTodoList(index) {
69 /*
70 const action = {
71 type: DELETE_LIST_VALUE,
72 value: index
73 }
74 */
75 console.log(index)
76 const action = getDeletTodoListValue(index)
77 store.dispatch(action)
78 }
79 handleStroeChange() {
80 this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件）
81 }
82 }
83 
84 export default App;