关于react绑定事件,闭包传参内存泄漏问题

Question

先上代码

function InputForm({ onSubmit = () => {} }) {
  const [data, setData] = useState({
    task: "",
    price: "",
    type: "",
  });

  function formChangeHandler(field) {
    return (e) => {
      setData({
        ...data,
        [field]: e.currentTarget.value,
      });
    };
  }

  return (
    <input
      required
      placeholder="任务"
      value={data["task"]}
      onChange={formChangeHandler("task")}
    ></input>
  );
}

如示例所示, 我在onChange事件接受了一个参数, 返回一个listener, 这个listener依赖外部的field, 虽然return了函数, 但我还是认为不妥, 我认为还是存在内在泄漏风险.

是否改成

onChange={(e) => formChangeHandler(e, "task")}

会好一些?

Answer 1

不会。
高阶函数是很常见的做法，前端耳熟能详的防抖、节流通常都靠高阶函数来实现，不会有大的问题。
闭包导致内存泄漏其实是早期 IE 存在的问题。
另外，通常只有大规模数据的处理、频繁调用函数、长时间运行等场景需要关注内存泄露问题，一般情况下有几个对象的内存没回收，可以忽略。