使用Hooks实现的TodoList

使用Hooks实现的TodoList

拆分组件

• 将其划分为三个模块
  

• 所有的组件我就只在一个js文件中写的

• 以下是全部的代码

• 具体说明，我在注释中解释

import React, {
    useState, useRef, useEffect, useCallback, memo } from 'react';
import './App.css'

/**
 * App: 最外层组件，是入口
 * TodoInput: 输入框
 * TodoList: 下面的数据显示，最外层
 * TodoListItem: 每条数据
*/
let time = Date.now();
const Local_key = '_todo_';
const TodoInput = memo((props) => {
   
  console.log(props);
  const {
    addTodo } = props;
  // 用来获取输入框里的值
  const textValue = useRef();
  const handleSubmit = (e) => {
   
    e.preventDefault();
    const newValue = textValue.current.value.trim();
    if (!newValue.length) {
   
      return;
    }
    addTodo({
   
      id: ++time,
      content: newValue,
      complete