1.TodoList.js代码

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

class TodoList extends Component{
  constructor(props){
    super(props);
    this.state = {
      inputValue:'',
      list:[],
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
  }
    render() {
        return(
          <Fragment>
            <div>
              {/*htmlFor='insertArea'扩大点击范围到label*/}
              <label htmlFor='insertArea'>输入内容</label>
                <input
                  id="insertArea"
                  className='input'
                  value={this.state.inputValue}
                  onChange={this.handleInputChange}
                />
                <button onClick={this.handleBtnClick}>提交</button>
            </div>
            <ul>
              {this.getTodoItem()}
            </ul>
          </Fragment>
        )
    }
  getTodoItem(){
   return this.state.list.map((item, index) => {
     //做循环 循环中的每一项都要有一个key值
      return (
          // 将子list中的item传给TodoItem
          <TodoItem
            key={index}
            content={item}
            index={index}
            deleteItem={this.handleItemDelete}
          />
          )
    })
  }
  handleInputChange(e){
    /**老方法*/
    // this.setState({
    //   inputValue : e.target.value,
    // })

    /** 新方法提升性能 可以接收函数 小括号相当于return 就是返回里面的对象
      * 写成函数变成异步的设置数据的话 需要在外面设置一下 再在里面使用
     * */
    const value = e.target.value;
    this.setState(() => ({
        inputValue:value
    }));
  }

  handleBtnClick(){
    //老方法
    // this.setState({
    //   list:[...this.state.list, this.state.inputValue],
    //   inputValue:''
    // })
    /**
     * this,setState会接收一个prevState
     * prevState等价于this.state*/
    //新方法 接收函数
    this.setState((prevState)=>({
         list:[...prevState.list,prevState.inputValue],
         inputValue:''
      }));
  }
  handleItemDelete(index){
    //immutable
    //state 不允许我们做任何改变
    // const list = [...this.state.list];
    // list.splice(index,1);
    // this.setState({
    //   list: list
    // })
    // console.log(index);
    /**
     * 新方法*/
    this.setState((prevState)=>{
      const list = [...prevState.list];
      list.splice(index,1);
      return{list}
    });
  }
}
export default TodoList;

2.TodoItem.js代码

class TodoItem extends Component{
  constructor(props){
    super(props);
    this.handleClick=this.handleClick.bind(this);
  }
  render() {
    const {content} = this.props;
    return(
      <div onClick={this.handleClick}>
        {/*{this.props.content}*/}
        {content}
      </div>)
  }
  handleClick(){
    const {deleteItem, index} = this.props;
    // this.props.deleteItem(this.props.index)
   deleteItem(index);
  }
}
export default TodoItem;

3.在TodoItem.js中

用ES6语法定义一个
const {content} = this.props;
用
{content}
调用，{content}就相当于
{this.props.content}
同理，
使用ES6语法定义
const {deleteItem, index} = this.props;
用
deleteItem(index);
调用，deleteItem(index);相当于
this.props.deleteItem(this.props.index)

4.TodoList.js代码中 提升性能部分

1.在constractu中定义所有this.handleInputChange.bind(this);写法，如下
this.handleInputChange = this.handleInputChange.bind(this);
这样的写法改变作用域的话，可以保证整个程序里这个作用域的绑定值执行一次，而且可以避免子组件的一些无畏渲染，提升性能。

2.setState方法中，将以下

this.setState({
      inputValue : e.target.value,
    })

替换为新版 新方法提升性能 可以接收函数 小括号相当于return 就是返回里面的对象
写成函数变成异步的设置数据的话 需要在外面设置一下 再在里面使用

const value = e.target.value;
    this.setState(() => ({
        inputValue:value
    }));

同理

 const list = [...this.state.list];
     list.splice(index,1);
     this.setState({
     list: list
     })

改写为

this.setState((prevState)=>{
      const list = [...prevState.list];
      list.splice(index,1);
      return{list}
    });

this.setState会接收一个prevState
prevState等价于this.state
3.生命周期中 提升性能避免不必要的渲染

shouldComponentUpdate(nextProps, nextState, nextContext) {
    //nextProps指的是接下来我的props会变成什么样
    //nextState指的是接下来我的state会变成什么样

    //如果我接下来的props里的content不等于当前prop里面的content 则需要渲染
    if (nextProps.content !== this.props.content){
      return true;
    } else {
      return false;
    }
  }