react-hooks实现todolist

分而治之

import React , {useState, useCallback, useRef, useEffect, memo} from 'react';
import './ToDoList.css';
const ToDoList = memo(function ToDoList () {
    const [todos, setTodos ] = useState([]);
    const addTodo = useCallback((todo) => {
        setTodos(todos => [...todos,todo]);
    },[])
    const removeTodo = useCallback(
        (id) => {
            setTodos(todos => todos.filter(todo => {
                return todo.id !== id;
            }))
         },
        []
    )
    const toggleTodo = useCallback((id) => {
       setTodos(todos => todos.map(todo => {
           return todo.id === id ? 
           { 
               ...todo, 
               complete: !todo.complete
           }:
           {...todo}
       }))
    },[])
    useEffect(() => {
        const todos = JSON.parse(localStorage.getItem('todos')) || [];
        setTodos(todos);
    },[])
    useEffect(()=> {
        localStorage.setItem('todos',JSON.stringify(todos))
    },[todos])
    return (
       <div className="todo-list">
           <Control addTodo={addTodo}></Control>
           <Todos toggleTodo={toggleTodo} removeTodo={removeTodo} todos={todos}></Todos>
       </div>  
    )
})
export default ToDoList;

• 添加TODO组件

let idSeq = 0;
const Control = memo(function Control (props) {
    const { addTodo } = props;
    const inputRef = useRef();
    const onSubmit = (e) => {
        e.preventDefault();
        const newText = inputRef.current.value.trim();
        if(newText.length > 0) {
           addTodo({
               id: ++ idSeq,
               text: newText,
               complete: false
           })
        }
        inputRef.current.value = "";
    }
    return <div className="control">
         <h1>todos</h1>
         <form onSubmit={onSubmit}>
             <input type="text" 
                    className="new-todo" 
                    placeholder="what needs td be done?" 
                    ref={inputRef}
             />
         </form>
    </div>
})

• TODO列表项组件

let idSeq = 0;
const Control = memo(function Control (props) {
    const { addTodo } = props;
    const inputRef = useRef();
    const onSubmit = (e) => {
        e.preventDefault();
        const newText = inputRef.current.value.trim();
        if(newText.length > 0) {
           addTodo({
               id: ++ idSeq,
               text: newText,
               complete: false
           })
        }
        inputRef.current.value = "";
    }
    return <div className="control">
         <h1>todos</h1>
         <form onSubmit={onSubmit}>
             <input type="text" 
                    className="new-todo" 
                    placeholder="what needs td be done?" 
                    ref={inputRef}
             />
         </form>
    </div>
})

• TODO列表组件

onst Todos = memo(function Todos (props) {
    const { todos , removeTodo, toggleTodo} = props;
    return (
        <ul className="todos">
        {
            todos.map(todo => {
                return (
                    <TodoItem 
                        key={todo.id}
                        todo={todo}
                        toggleTodo={toggleTodo}
                        removeTodo={removeTodo}
                 />
                )
            })
        }
    </ul>
    )
})