React使用笔记

数组篇

import { useState } from 'react';
let nextId = 3;
const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Eat tacos', done: false },
  { id: 2, title: 'Brew tea', done: false },
];

export default function TaskApp() {
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAddTodo(title) {
    // 增
    let list = [...todos,{id:nextId++,title:title,done: false}]
    setTodos(list)
  }

  function handleChangeTodo(nextTodo) {
    // 改
    const list = todos.map(item =>{
      if(item.id === nextTodo.id){
        return {id:item.id,title:nextTodo.title,done:nextTodo.done}
      } else {
        return item
      }
    })
    setTodos(list)
  }

  function handleDeleteTodo(todoId) {
    // 删
    setTodos(todos.filter(t =>
      t.id !== todoId
    ))
  }

  return (
    <>
      <AddTodo
        onAddTodo={handleAddTodo}
      />
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}


使用immer插件

import { useState } from 'react';
import { useImmer } from 'use-immer';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';

let nextId = 3;
const initialTodos = [
{ id: 0, title: 'Buy milk', done: true },
{ id: 1, title: 'Eat tacos', done: false },
{ id: 2, title: 'Brew tea', done: false },
];

export default function TaskApp() {
const [todos, setTodos] = useImmer(
initialTodos
);

function handleAddTodo(title) {
// 增
setTodos([...todos,{id:nextId++,title:title,done:false}])
}

function handleChangeTodo(nextTodo) {
// 改
setTodos(item => {
const cell = item.find(a => a.id === nextTodo.id)
cell.title = nextTodo.title;
cell.done = nextTodo.done;
})
}

function handleDeleteTodo(todoId) {
// 删
setTodos(todos.filter(t =>
t.id !== todoId
))
}

return (
<>
<AddTodo
onAddTodo={handleAddTodo}
/>
<TaskList
todos={todos}
onChangeTodo={handleChangeTodo}
onDeleteTodo={handleDeleteTodo}
/>
</>
);
}