父组件，代码优化，.bind(this)优化，提高代码执行性能

抽离标签里面的代码，定义为函数，直接{函数名}调用即可。

使用 const 定义某变量，代替 this.props

this.props.content 则可使用 const 中的变量名代替

把写在标签里面的bind(this) 提取到 constructor 构造函数中，提升性能

其它子组件也一样，构造函数中定义方法等于bind(this);

将this绑定放到结构方法中，能提高性能

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemChange = this.handleItemChange.bind(this);

给render()里面的 return 加上括号，方便写多行

        return (
          <TodoItem
            deleteItem={this.handleItemChange}
            key={index}
            content={item} />
        )

使用ES6 解构赋值的写法

const { deleteItem, index} = this.props;
deleteItem(index)

把代码量比较多的item提取成方法

  getTodoItems(){
    return (
      this.state.list.map((item, index) => {
        return (
          <TodoItem
            deleteItem={this.handleItemChange}
            key={index}
            content={item} />
        )
      })
    )
  }

<ul>{this.getTodoItems()}</ul>

constructor 初始化数据，可以直接进行this相关方法的绑定

代码优化

子组件中的调用父组件的内容时，可以改成这样ES6语法

代码优化

可以把一些复杂的代码抽出一个方法

性能优化

再constructor中绑定事件为最佳

在constructor中声明事件方法的bind(this)，可以提升代码的执行性能。

props接参最好用结构的方法赋值，即可直接取值，不需要再this.props.***

渲染 li 列表的部分可以單獨拆分成一個函式來編寫。
getTodoItems()

handleDelete(){
    this.props.delete(this.props.index);
}

ES6的結構賦值

handleDelete(){

}

但 delete因為是個 reserved word，所以頁面會報錯，所以先不改了

render(){
    return(
        <div onClick={this.handleDelete}>{this.props.content}></div>
     )
 }

可以使用 ES6的結構賦值     

render(){
    return(
        
        <div onClick={this.handleDelete}>></div>
     )
 }

把代碼寫漂亮一點，把 return 加個括號

程式中有很多地方使用 .bind(this)

例如:
<input onChange={this.handleInputChange.bind(this)}
實際上這麼寫 React 代碼的性能會稍微有些影響，所以不建議。

我們可以在 constructor 裡面寫
this.handleInputChange = this.handleInputChange.bind(this);
事先就做好 this 指向的改變

因此就在原本的寫法就沒必要再寫 .bind(this)
<input onChange={this.handleInputChange}

es6的结构赋值：

const {content} = this.props

=》

使得可以直接使用`{content}`代替`{this.props.content}`

一、代码优化

1、在构造函数中做好this指向的改变

下面就不用.bind(this)

可以改变代码的执行性能

2、解构赋值

3、解决render函数中代码过长