javascript - 将参数传递给事件处理程序，而无需在每次无状态组件重新呈现时创建处理程序的新引用

Question

// @flow
import React from 'react';
import Input from 'components/Input';
import logo from 'assets/images/svg/logo.svg';
import styles from './style.module.css';

type TodoMethod = string => void;

type TodoProps = {
  todoList: TodoList,
  addTodo: TodoMethod,
  deleteTodo: TodoMethod,
};

// Return a function to delete a task
function getDeleteTodoMethod(taskName: string, callback: TodoMethod) {
  const deleteTodo = () => {
    callback(taskName);
  };

  return deleteTodo;
}

function Todo({ todoList, addTodo, deleteTodo }: TodoProps) {
  return (
    <div className={styles.container}>
      <header className={styles.appHeader}>
        <img src={logo} className={styles.appLogo} alt="logo" />

        <a
          className={styles.appLink}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <main>
        <Input onEnter={addTodo} />

        {todoList.map((item: TodoItem) => (
          <div key={item.index}>
            <span>{item.name}</span>

            <button
              type="button"
              onClick={getDeleteTodoMethod(item.name, deleteTodo)}
            >
              X
            </button>
          </div>
        ))}
      </main>
    </div>
  );
}

export default Todo;

我在一篇文章中读到，不应在无状态组件内创建函数，因为重新渲染会导致方法的重新实例化。因此，我在组件外部创建了一个函数。

deleteTodo 是一个我想在单击DELETE TODO 按钮时使用参数调用的操作。这可以通过组合在基于类的组件中轻松完成。

我可以简单地创建 () => deleteTodo(taskName) 并将其作为事件处理程序传递，但每次重新渲染都会创建一个新实例。

如果我创建一个名为 Button 的新无状态组件，它会导致我遇到同样的问题:

1. 如果我想访问 prop taskName，我必须在无状态组件内创建该函数
2. 如果我在组件外部创建一个函数，我必须以某种方式传递参数

因此，我创建了一个返回命名函数的函数。

// Return a function to delete a task
function getDeleteTodoMethod(taskName: string, callback: TodoMethod) {
  const deleteTodo = () => {
    callback(taskName);
  };

  return deleteTodo;
}

但是，每当组件重新渲染时，命名函数都会被再次分配，因为我觉得没有对命名函数的引用。

我的解释正确吗？如果是，那么我该如何解决这个问题？如何在不重新创建引用的情况下将参数传递给处理程序以避免性能限制？

此外，有没有办法测试是否已创建函数的新引用？

Answer 1

根据官方文档，在渲染函数中定义函数对性能的影响可以忽略不计:

https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

如果您想防止子级在回调更改时重新渲染，请使用钩子(Hook)创建一个内存回调: https://reactjs.org/docs/hooks-reference.html#usecallback