一：jsx语法细节补充

• 定义css的类的时候，不能用class，要用className来代替class这个关键词，因为我们用class已经声明类了，这样会重复定义。
• 注释的话用{/*我是注释*/}
• 点击label获取input的光标，可以在input上定义一个id，比如这个id是insertArea，那么在label中加htmlFor。代替之前的for 关键字。
• 在import React, { Component }，这里的{ Component}是结构赋值。

二：拆分组件与组件之间的传值

组件化思维

react是树形的结构，这里todoList是大组件，todoItem是todoList下的小组件。

父组件向字组件传递数据用属性才进行传递，通过标签属性传递（属性和方法）过去之后，子组件用this.props.*来进行接收。
子组件如何调用父组件的方法，并改变里面的数据？把父组件的方法传给子组件即可。用this.props.*，父组件如果传递方法，需要做一次绑定。
要不然会出现下面的错误：
TypeError: Cannot read property 'list' of undefined

三：优化todoList

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

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

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);
  }

  handleInputChange (e) {
    const value = e.target.value
    this.setState(() => ({
      inputValue: value
    }))
    // old
    // this.setState({
    //   inputValue: e.target.value
    // })
  }

  handleBtnClick() {
    //setState有一个参数可以接收以前的数据
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }))

    // old
    // this.setState({
    //   list: [...this.state.list, this.state.inputValue],
    //   inputValue: ''
    // })
  }

  handleItemDelete (index) {
    // immutable
    // state 不允许我们做任何改变
    this.setState((prevState) => {
      const list = [...prevState.list]
      list.splice(index, 1);
      return {list}
    });
  }

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

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange} />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul>
          {this.getTodoItem()}
        </ul>
      </Fragment>
    )
  }
}

export default TodoList; //把自身导出，外部才可以引用。

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

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

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

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

export default TodoItem;

四：围绕react衍生出的思考

• 直接操作dom的开发方式是命令式开发的方式，比如我们熟悉的jquery
• 而react是声明式开发 可以与其他框架并存 组件式开发
• react是单向数据流，只允许父组件向子组件传递数据，子组件绝对不能修改父组件传递的数据，而必须要删除的话是子组件调用父组件的方法，然后进行删除，这里实际上也是调用对父组件进行操作，这样只需要维护父组件即可，维护起来比较容易
• react是一个视图层框架，小型项目即可。而大型的需要依赖Flux redux等这样的数据层框架
• 函数式编程，都是一个一个的函数组成，方便于测试，给前端的自动化测试带来很大的便捷性。

以上。