react todoList 案例 知识点总结

一、最终效果

二、实现功能

• 添加 toddo
• 删除 todo
• 全选/取消全选 todo
• 清除所有已完成 todo

三、通过学习到的知识

1. 拆分组件、实现静态组件。注意 class 与 style 的写法

 className="todo-wrap"
 style={
    
    {
    
     backgroundColor: mouse ? '#ddd' : 'white' }

2. 动态初始化列表,如何确定将数据放在哪个组件的 state中?

— 某个组件使用:放在其自身的 state中
— 某些组件使川:放在他们共同的父组件 state中(官方称此操作为状态提升

3. 关于父子之间通信

— 【父组件】给【子组件】传通数据:通过 props传递
— 【子组件】给【父组件】传数据:通过 props传递,要求父提前给子传递一个函数

// 【父组件】给【子组件】传递数据
<Header addTodo={
    
    this.addTodo} />

//【子组件】给【父组件】传递数据
//子组件内写：
  handleClearDone = () => {
    
    
    this.props.clearAllDone()
  }
//父组件内定义函数
  clearAllDone = () => {
    
    
    const {
    
     todos } = this.state
    const newTodos = todos.filter((todoObj) => {
    
    
      return !todoObj.done
    })
    this.setState({
    
     todos: newTodos })
  }

4. 注意 defaultchecked和 checked的区别,类似的还有: defaultvalue和 value

defaultchecked：只在第一次渲染有作用，后续checked值改变，其样式不会发生对应改变
checked：react 中使用 checked 必须和 onChange 事件配合使用，否则会有警告

5.状态在哪里,操作状态的方法就在哪里

四、github链接

todoList demo