todolist 代码优化

在之前我们todolist 的代码中，我们使用了很多xxx.bind(this) 这种绑定this 的代码

那么，我们可以做一个优化。

将bing 放置到class 的constructor 中来。

比如TodoList.js，如下。

import React, {
  Component
} from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleDelete(index) {
    const list = [...this.state.list]
    list.splice(index, 1)

    this.setState({
      list: list
    })
  }
  render() {
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index) => {
              return (
                <TodoItem delete={this.handleDelete} key={index} content={item} index={index}/>)
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

好的，然后，我们使用ES6 语法，简化一下TodoItem代码，如下。

import React, {
  Component
} from 'react'

class TodoItem extends Component {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this)
  }
  handleDelete() {
    const {
      deleteItem,
      index
    } = this.props;
    deleteItem(index);
  }
  render() {
    const {
      content
    } = this.props;
    return (
      <div onClick={this.handleDelete}>{content}</div>
    )
  }
}

export default TodoItem

然后，把TodoList.js 中ul 中代码，可以放到函数中，如下。

import React, {
  Component
} from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleDelete(index) {
    const list = [...this.state.list]
    list.splice(index, 1)

    this.setState({
      list: list
    })
  }
  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
        return (
          <TodoItem deleteItem={this.handleDelete} key={index} content={item} index={index} />
        )
      })
    )
  }
  render() {
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </div>
    );
  }
}

export default TodoList;

Done！