UI组件 和 容器组件

像原来的代码：

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/index.js';
import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction
} from './store/actionCreators';

class BeautifulToDoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    store.subscribe(this.handleStoreChange);
  }

  render() {
    return (
      <div style={{marginTop: '10px',marginLeft: '10px'}}>
        <Input
          value={this.state.inputValue}
          placeholder="todo info"
          style={{width: 300, marginRight: '10px'}}
          onChange={this.handleInputChange}
        />
        <Button
          type="primary"
          onClick={this.handleBtnClick}
        >提交</Button>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.state.list}
          renderItem={(item, index) => (<List.Item onClick={this.handleItemClick.bind(this, index)}>{item}</List.Item>)}
        />
      </div>
    )
  }

  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }

  handleStoreChange() {
    this.setState(store.getState());
  }

  handleBtnClick() {
    const action = getAddItemAction();
    store.dispatch(action);
  }

  handleItemClick(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }

}

export default BeautifulToDoList;

我们把 结构样式 与业务逻辑 写在一起。有点眼花缭乱。

可以把它拆分，把结构样式放一个文件，业务逻辑放一个文件。前者叫UI组件，后者叫容器组件。

好。我们新建一个TodoListUI.js 文件，将上面前端展示部分放进来，如下。

import React, {Component} from 'react';

class TodoListUI extends Component {
  render() {
    return (
      <div style={{marginTop: '10px',marginLeft: '10px'}}>
        <Input
          value={this.state.inputValue}
          placeholder="todo info"
          style={{width: 300, marginRight: '10px'}}
          onChange={this.handleInputChange}
        />
        <Button
          type="primary"
          onClick={this.handleBtnClick}
        >提交</Button>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.state.list}
          renderItem={(item, index) => (<List.Item onClick={this.handleItemClick.bind(this, index)}>{item}</List.Item>)}
        />
      </div>
    )
  }
}

export default TodoListUI;

然后，再在原 BeautifulToDoList.js 文件中删掉render 中的内容，并进行如下修改。

import React, {Component} from 'react';
import store from './store/index.js';
import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction
} from './store/actionCreators';
import TodoListUI from './TodoListUI';


class BeautifulToDoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
    store.subscribe(this.handleStoreChange);
  }

  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleInputChange={this.handleInputChange}
        handleBtnClick={this.handleBtnClick}
        handleItemClick={this.handleItemClick}
      />
    )
  }

  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }

  handleStoreChange() {
    this.setState(store.getState());
  }

  handleBtnClick() {
    const action = getAddItemAction();
    store.dispatch(action);
  }

  handleItemClick(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }

}

export default BeautifulToDoList;

然后相应修改一下TodoListUI.js 文件，如下。

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';


class TodoListUI extends Component {
  render() {
    return (
      <div style={{marginTop: '10px',marginLeft: '10px'}}>
        <Input
          value={this.props.inputValue}
          placeholder="todo info"
          style={{width: 300, marginRight: '10px'}}
          onChange={this.props.handleInputChange}
        />
        <Button
          type="primary"
          onClick={this.props.handleBtnClick}
        >提交</Button>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (<List.Item onClick={() => {this.props.handleItemClick(index)}}>{item}</List.Item>)}
        />
      </div>
    )
  }
}

export default TodoListUI;