const ls = [...this.tate.list]; 表示拷贝list的值到ls

ls.splice(index, 1); 表示删除副本的一个值。

this.setStete ({

 list: ls

});

不建议直接操作原来的数组，这样写性能低下，有些新特性无法使用。

即不建议这样写：

this.state.list.splice(index, 1);

this.setState({

    list: this.state.list

});

<input 输入标签 添加onChange输入改变事件，绑定某个方法。

console.log(e.target.value); 控制台打印传递输入的值

使用setState传值给定义的inputValue，只要值发生变化界面也跟着刷新

this.setState{

    inputValue: e.target.value

}

点击事件获取inputValue的值，this.state.inputVaule

<input value={this.state.inputValue} 表示输入标签的值绑定inputValue当值改变时输入标签也跟着刷新

用于点击事件置空inputValue的值时，<input 标签也变为空。

constructor 为组件创建的时候会执行的构造函数。

this.state 为组件数据项，可以存储很多数据内容。

循环获取state定义的list里面的内容

{

this.state.list.map((itxx) => {

    return <li>{itxx}</li>

})

}

使用.bind(this) 语句表示绑定父组件，不然子组件里面的this表示当前而无法找到this.state

this.state.list.push('xxx'); 无法添加数据到list并改变组件显示，

而需要调用this.setState方法和展开运算符语法添加到list。

setState数据发生变化时界面才会发送变化。

增加第二个参数返回（item, index）index 为list数组的下标，

<li 标签增加 key={index} 去除没有key警告（注意key值不能重复）

jsx 语法

可以在标签内写JS表达式语句，如：{ 1 + 2}

不能这样写，JS判断语句是会报错的

组件是网页上的一部分，可以是一整块，或一个输入框，或一个按钮，或一个显示的区域

React 中以大写开头的都是一个组件。

import React from 'react' 表示引入react语法。

引入的'react-dom' 别名ReactDOM 去加载APP这个组件。

创建一个组件，继承Componect，注意import React, { Component } from 'react'; 

还要注意Export 表示导出组件。

或这样写，但继承变成：React.Component 组件。

ReactFiber是React16之后的版本

行内样式使用对象的方式编码

｜  style={{'background': 'red'}} 

class改名为 className

｜ className='add-btn'

导入样式文件

｜ import './style.css'

如果不想render最外层div，使用 React.Fragment标签

｜ <React.Fragment>

｜   <div>...</div>

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

｜ </React.Fragment>

将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>

父组件将数组索引传给子组件

｜ <TodoItem delete={this.handleItemChange.bind(this)} key={index} content={item} />

    通过 index属性传递数组下标

    子组件通过 props.index 获得下标

子组件跟父组件通信，需要调用父组件传递过来的方法

｜ this.props.delete(index)

父组件通过属性给子组件传参，子组件通过事件跟父组件通信

拆分TodoItem组件

import React from "react";

class TodoItem extends React.Component {
    render(){
        return (
            <div>{this.props.content}</div>
        )
    }
}

export default TodoItem;

React有父子组件的概念，TodoList为父组件，TodoItem为子组件，

    父组件通过属性给子组件传参

    ｜ <TodoItem content={item} />

    子组件通过props接收父组件参数

    ｜ <div>{this.props.content}</div>

React不直接操作DOM，删除功能操作的是数据

通过数据下标做删除功能，下标一般用数据库id，实在没办法采用数组索引

通过 splice方法做数组删除

｜ list.splice(index, 1);

尽量不要直接操作 state数据，而是复制出一个副本

｜ const list = this.state.list;

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