具体的之间看代码下面说几个注意点

主要的是对对象数组的处理，由于react 不推荐直接改变state的值

数组操作基本上都是 [*todoObj*, ...todos]; 的方式

1. 增加 用 map方法返回新数组
2. 更新用map方法返回新数组，并改变其的值
3. 删除用filter方法 返回新数组

也就是说对象数组的操作以list的遍历方法为主，返回一个新的state对象

//push 方法会直接修改原始数组，并且返回的是修改后的数组的长度，而不是一个新的数组
  addTodo = (todoObj) => {
    const { todos } = this.state;
    const newTodos = [todoObj, ...todos];
    this.setState({
      todos: newTodos,
    });
  };

  deleteTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter((todo) => todo.id !== id);
    this.setState({
      todos: newTodos,
    });
  };

  //还是那句话，不能直接修改state里面的数组
  updateTodo = (id, done) => {
    const newTodos = this.state.todos.map((o) => {
      //这样子虽然也能实现，但是修改了原来的state 好像不太好
      // if(o.id===id)done
      //   o.done=done
      // return o

      if (o.id === id) {
        //done:done 可以简写为 done
        return { ...o, done };
      }
      return o;
    });
    this.setState({ todos: newTodos });
  };

1⃣ …拓展符

这个不是解构赋值，也不是js的…拓展符 react中 {...p}不是克隆对象运算符 ...p 能直接展开对象是babel在做转化 当然仅仅只能在标签属性中使用 别的地方不行

//name={todo.name} done={todo.done} 的时候可以简写 {...todo} 批量传递 只能是单个对象，数组对象不行
						//这个不是解构赋值，也不是js的。。。拓展符，而是react定义的语法糖
						return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>

具体见组件实例的三大核心属性之Props

2⃣ 子组件向父组件传参

<aside> 🔔 状态在哪里，操作状态的方法就在哪里

</aside>