我正在使用context和useReducer创建一个简单的React todo应用程序，并且我不确定在其中一项更改时如何防止每个待办事项重新渲染。当一个待办事项更改时，将分派一个动作，从而导致状态更新。具体地说，reduce返回一个待办事项已更新而其他待办事项相同的状态的新副本。

鉴于状态会发生变化，因此在更新一个待办事项时重新渲染所有待办事项是有意义的。但是，我的待办事项组件将必要的道具传递给每个待办事项-并且这些道具不会更改-因此我认为不必更改道具的todo组件不会重新渲染。取而代之的是，当我使用开发工具并选中突出显示重新渲染的框时，我看到它们全部闪烁。我想念什么？

// from the reducer
    case "EDIT_TODO":
      return state.map(todo => {
        if (todo.id === action.payload.id) {
          return {
            ...todo,desc: action.payload.value
          };
        } else {
          return todo;
        }
      });
    default:
      return state;

// from the todos component
<ul classname="TodosApp">
    {todos.map(todo => (
        <li key={todo.id}>
            <Todo
              id={todo.id}
              complete={todo.complete}
              description={todo.desc}
            />
       </li>
    ))}
</ul>

// from the todo component
// handleToggleTodo function dispatches an "EDIT_TODO" action
const Edittodo = ({ id,description,complete }) => {
    // not showing the handleToggleTodo function,which dispatches an "EDIT_TODO" action
    // and has a payload with the todo id and the updated todo description.
    return (
      <Fragment>
        <input type="checkbox" checked={complete} onChange={handleToggleTodo} />
        <input
           classname="Todo-input"
           type="text"
           value={description}
           onChange={handleChange}
        />
      </Fragment>
   )

我的工作在codeandbox中，https://codesandbox.io/s/determined-fire-8hirp?fontsize=14