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

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

• ui组件-傻瓜组件-页面渲染
• 容器组件-聪明组件-页面逻辑
• 我们现看看原来组件

/**
 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store）
 */

import React, { Component, Fragment }from 'react';
import { Input, Button, List, message } from "antd";
import store from './store'; // 引入图书管理员 store
// 引入action
import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
// import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
import "antd/dist/antd.css";
class App extends Component {
  constructor(props){
    super(props)
    this.state = store.getState()
    console.log(store.getState())
    this.handleInputChange = this.handleInputChange.bind(this);
    this.addTodoList = this.addTodoList.bind(this);
    this.handleStroeChange = this.handleStroeChange.bind(this);
    // this.deletTodoList = this.deletTodoList.bind(this);
    store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化
  }

  render() {
    return (
      <Fragment>
        <div style={{ marginTop: '10px', marginLeft: '10px'}}>
          <Input 
          placeholder='todo-list'
          style={{ '300px', marginRight: '10px'}}
          onChange = { this.handleInputChange }
          value = { this.state.inputValue }
          />
          <Button 
          type="primary"
          onClick = { this.addTodoList }
          >提交</Button>
        </div>
        <List
        style={{ '300px', marginLeft: '10px', marginTop: '5px'}}
        size="large"
        bordered
        dataSource={ this.state.list ? this.state.list : null }
        renderItem={ (item, index) => <List.Item style={{position:'relative'}}>
        {item}
        <Button 
        type='danger' 
        style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
        onClick={ this.deletTodoList.bind(this, index) }
        >删除</Button>
        </List.Item>}
        />
      </Fragment>
    );
  }
  handleInputChange(e) {
    /*
    const action = {
      type: CHANGE_INPUT_VALUE, // 借什么书
      value: e.target.value
    }
    */
    const action = getInputChangeValue(e.target.value)
    store.dispatch(action); // 传达给store
    console.log(e.target.value)
  }
  // 添加
  addTodoList() {
    /*
    if (this.state.inputValue) {
      const action = {
        type: CHANGE_LIST_VALUE,
        item: this.state.inputValue
      }
      store.dispatch(action)
    } else {
      message.warning('请输入内容');
    }
    */
   if (this.state.inputValue) {
      const action = getAddTodoListValue(this.state.inputValue)
      store.dispatch(action)
   } else {
    message.warning('请输入内容');
   }
  }
  // 删除
  deletTodoList(index) {
    /*
    const action = {
      type: DELETE_LIST_VALUE,
      value: index
    }
    */
    const action = getDeletTodoListValue(index)
    store.dispatch(action)
  }
  handleStroeChange() {
    this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件）
  }
}

export default App;

• 接下来我们本原组件的html部分（render函数的内容）拆分到单独一个组件
• 原来的数据方法都是通过props获取
• render函数中的jsx语法不能直接在函数中传递参数，但是可以使用箭头函数

import React, { Component, Fragment }from 'react';
import { Input, Button, List } from "antd";

class AppUi extends Component {
    render() {
        return (
            <Fragment>
            <div style={{ marginTop: '10px', marginLeft: '10px'}}>
              <Input 
              placeholder='todo-list'
              style={{ '300px', marginRight: '10px'}}
              onChange = { this.props.handleInputChange }
              value = { this.props.inputValue }
              />
              <Button 
              type="primary"
              onClick = { this.props.addTodoList }
              >提交</Button>
            </div>
            <List
            style={{ '300px', marginLeft: '10px', marginTop: '5px'}}
            size="large"
            bordered
            dataSource={ this.props.list ? this.props.list : null }
            renderItem={ (item, index) => (<List.Item  style={{position:'relative'}}>
            {item}
            <Button 
            type='danger' 
            onClick= {() => {this.props.deletTodoList(index)}}
            style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
            >删除</Button>
            </List.Item>)}
            />
          </Fragment>
        )
    }
}

export default AppUi

• 原组件剩下的都是逻辑代码，编程了容器组件
• 将ui组件引入原组件
• 并且给ui组件中传递他所需要的props

/**
 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store）
 */

import React, { Component }from 'react';
import { message } from "antd";
import store from './store'; // 引入图书管理员 store
import AppUi from './AppUi';
// 引入action
import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
// import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
import "antd/dist/antd.css";
class App extends Component {
  constructor(props){
    super(props)
    this.state = store.getState()
    console.log(store.getState())
    this.handleInputChange = this.handleInputChange.bind(this);
    this.addTodoList = this.addTodoList.bind(this);
    this.handleStroeChange = this.handleStroeChange.bind(this);
    this.deletTodoList = this.deletTodoList.bind(this);
    store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化
  }

  render() {
    return (
      <AppUi
      inputValue = {this.state.inputValue}
      handleInputChange = {this.handleInputChange}
      deletTodoList = {this.deletTodoList}
      addTodoList = {this.addTodoList}
      list = {this.state.list}
      />
    )
  }
  handleInputChange(e) {
    /*
    const action = {
      type: CHANGE_INPUT_VALUE, // 借什么书
      value: e.target.value
    }
    */
    const action = getInputChangeValue(e.target.value)
    store.dispatch(action); // 传达给store
    console.log(e.target.value)
  }
  // 添加
  addTodoList() {
    /*
    if (this.state.inputValue) {
      const action = {
        type: CHANGE_LIST_VALUE,
        item: this.state.inputValue
      }
      store.dispatch(action)
    } else {
      message.warning('请输入内容');
    }
    */
   if (this.state.inputValue) {
      const action = getAddTodoListValue(this.state.inputValue)
      store.dispatch(action)
   } else {
    message.warning('请输入内容');
   }
  }
  // 删除
  deletTodoList(index) {
    /*
    const action = {
      type: DELETE_LIST_VALUE,
      value: index
    }
    */
   console.log(index)
    const action = getDeletTodoListValue(index)
    store.dispatch(action)
  }
  handleStroeChange() {
    this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件）
  }
}

export default App;