react入门系列之todolist代码优化（使用react 新特性，es6语法）

代码优化

• 今天我们通过es6语法，以及react新特性来优化我们的todo-list
• 顺带解决上个版本的key报错问题

使用es6的解构赋值优化代码

• 当我们需要一个对象某个属性的时候，我们可以使用解构赋值，这样在后续的代码就不需要通过原对象不停调用属性去获取了
• const { index } = this.props -----> 这就是解构赋值，在后续同一作用域使用this.props.index的时候直接使用index就可以了。
• item.js代码修改如下,app.js的代码就不在此展示了,各位自行修改。

import React, {Component, Fragment} from 'react';

class Item extends Component {
    deletItem = () => {
        const { deletItem, index } = this.props; // 解构赋值
        deletItem(index);
    }
    render(){
        const { value } = this.props; //解构赋值
        return(
            <Fragment>
                <div
                onClick = {this.deletItem}
                >
                {value}
                </div>
            </Fragment>
        )
    }
}

export default Item

react新特性

• 旧版本的react提供的setState()方法，只能接收一个对象。
• 新版本的react中，setState()还可以接收一个函数，并且该函数有一个默认参数prevState
• prevState表示未修改之前的state，也就是说我们在使用的时候无需再用this.state去获取属性了
• 另外在原先的代码中我们的render函数写得过于长，现将用一个函数将使用map函数的逻辑部分抽出来
• 解决key值报错问题，在引入item组件后使用的时候，给每一个item绑定一个key，目前我们现使用index，
• 后续我们讲解虚拟dom的时候再讲解为何开发中我们不要使用index去给key赋值。
• 现在使用这个特性去优化我们的app.js,代码如下。

    import React, { Component, Fragment }from 'react';
import Item from './item.js'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue: '',// 用来存储 input框中的 value值。
      list:[] // 用来存储 每一个li的 value值。
    }
  }
  handleInputChange = (e) => {
    const value = e.target.value;
    this.setState(() => ({inputValue: value}))//新版的react中的setState()函数可以接收一个函数，箭头函数的函数体使用（）包裹可以省略return
  }
  addList = () => {
    this.setState((prevState) => { // 同时setState函数还提供一个prevState参数，这个参数代表未改变之前的this.state
      const list = [...prevState.list, prevState.inputValue];
      return {
        list,
        inputValue: '' // 添加完毕以后清空input框
      }
    })
  }
  deletListItem = (index) => { // 因为在绑定该方法的时候使用了bind函数，所以这里可以不实用箭头函数去保证this的指向
    this.setState((prevState) => {
      let list = [...prevState.list];
      list.splice(index, 1);
      return {list};
    })
  }
  // 在原先的代码中我们的render函数写得过于长，现将使用map函数的逻辑部分抽出来
  getItem = () => {
    return (
      this.state.list.map((item, index) => {
        return(
          <Item 
          key = {index} // 解决key值问题。
          value = {item} 
          index = {index}
          deletItem = {this.deletListItem}
          ></Item>
        )
      })
    )
  }
  render(){
    return (
      <Fragment>
      <div>
        <input
        onChange = { this.handleInputChange }
        value = {this.state.inputValue} 
        />
        <button onClick = { this.addList }>提交</button>
      </div>
      <ul>
        {this.getItem()} {/** 在次调用抽出来的逻辑函数，调用一下即可。*/}
      </ul>
      </Fragment>
    );
  }
}
export default App;

）