a将硬币扔给您的…处理人员?

我不是阿姆

因此，我不擅长于每秒7.6个单词。

我是一个React开发人员。

我每秒只说0个字。

我每秒进行7.6状态更新。

我制作待办事项应用程序。

这就是我使处理程序更具可读性的方式 use-immer。

这是我的Todo组件。

import React from 'react';

function Todo({ completed, onChange, onDelete, text }) {
  return (
    <div>
      <input
        checked={completed}
        name="completed"
        onChange={onChange}
        type="checkbox"
      />
      <input name="text" onChange={onChange} type="text" value={text} />
      <button onClick={onDelete}>Deletebutton>
    div>
  );
}

export default Todo;

这是我的App组件。

import React, { useState } from 'react';

import Todo from './Todo';

function App() {
  const [todos, setTodos] = useState([]);
  // const [todos, setTodos] = useImmer([]);

  // imagine handlers here

  return (
    <>
      {todos.map(({ completed, text }, index) => (
        <Todo
          completed={completed}
          key={index}
          onChange={handleTodoChange(index)}
          onDelete={handleTodoDelete(index)}          
          text={text}
        />
      ))}

      <button onClick={handleTodoAdd}>Add todobutton>
    
  ) 
}

export default App;

我需要三个处理程序：

1. 添加新的待办事项
2. 删除待办事项
3. 编辑待办事项（其状态或文字）

我将编写三种方式来做到这一点：

1. 不变的方式
2. 使用 immer的 produce
3. 使用 useImmer 摘自 use-immer。

对于不熟悉的人 immer，produce 是为您提供变异的草图并产生下一个不变状态的函数。

useImmer 类似于 useState 除了updater函数为您提供可以更改的草稿外。

添加待办事项

不变的方式：

const handleTodoAdd = () => {
  setTodos(prev => [...prev, { completed: false, text: "" }]);
}

使用 produce：

const handleTodoAdd = () => {
  setTodos(prev =>
    produce(prev, draft => {
      draft.push({ completed: false, text: "" });
    })
  );
}

使用 useImmer：

const handleTodoAdd = () => {
  setTodos(draft => {
    draft.push({ completed: false, text: "" });
  });
}

删除待办事项

不变的方式：

const handleDeleteClick = i => () => {
  setTodos(prev => prev.filter((_, j) => j !== i));
}

使用 produce：

const handleDeleteClick = i => () => {
  setTodos(prev =>
    produce(prev, draft => {
      draft.splice(i, 1);
    })
  );
}

使用 useImmer：

const handleDeleteClick = i => () => {
  setTodos(draft => {
    draft.splice(i, 1);
  });
}

编辑待办事项

不变的方式：

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(prev =>
    prev.map((todo, j) => {
      if (j === i) {
        return {
          ...todo,
          [target.name]: value
        };
      }

      return todo;
    })
  );
};

使用 produce：

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(prev =>
    produce(prev, draft => {
      draft[i][target.name] = value;
    })
  );
};

使用 useImmer：

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(draft => {
    draft[i][target.name] = value;
  });
};