reactjs - 如何正确声明箭头函数？

Question

有什么区别

document.addEventListener("click", (e) => handleClick(e));

和

document.addEventListener("click", handleClick);

在控制台中看到的第一种情况:

第二种情况:

那么为什么有时结果会翻倍呢？

片段:

import React, {useState, useEffect} from 'react'
import TodoList from './TodoList'

export default function App () {

  const [todos, setTodos] = useState([]);
  const [todoTitle, setTodoTitle] = useState("");
  const [changed, setChanged] = useState(false);

  const handleClick = (e) => console.log("click", e.target);

  useEffect(() => {
    const raw = localStorage.getItem("todos") || JSON.stringify([]);
    setTodos(JSON.parse(raw));
  }, []);

  useEffect(() => {
    document.addEventListener("click", (e) => handleClick(e));
    localStorage.setItem("todos", JSON.stringify(todos));
    
    return () => {
      document.removeEventListener("click", (e) => handleClick(e));
    }
  })

  const addTodo = event => {
    if (event.key === "Enter") {
      setTodos([
        ...todos,
        {
          id: Date.now(),
          title: todoTitle,
          completed: false
        }
      ])
      setTodoTitle("");
    }
  }
    return (
      <div className="container">
        <h1>Todo app</h1>
          <div className="input-field">
            <input
              type="text"
              value={todoTitle}
              onChange={e => setTodoTitle(e.target.value)}
              onKeyPress={addTodo}
              />
            <label>Todo name</label>
          </div>
          <TodoList todos={todos} />
          <button onClick = {() => setChanged(!changed)}>button</button>
      </div>
    );
}

Answer 1

主要区别在于，在第一种情况下，您直接绑定(bind) handleClick，而在第二种情况下，您绑定(bind)的是调用 handleClick 的“中间”函数。可观察到的结果是一样的。

但是你看到输出加倍的原因是

document.removeEventListener("click", (e) => handleClick(e));

不起作用。 removeEventListener 只能在您传递 与传递给 addEventListener 的函数相同的 函数时工作。如果你传递 handleClick 没问题，但如果你使用“中间”函数则不可能，因为你没有保留对该函数的引用。

你可以很容易地解决这个问题:

useEffect(() => {
  const handler = (e) => handleClick(e)
  //    ^^^^^^^ "remember" the function
  document.addEventListener("click", handler);
  //                                 ^^^^^^^
  localStorage.setItem("todos", JSON.stringify(todos));

  return () => {
    document.removeEventListener("click", handler);
    //                                    ^^^^^^^
  }
})

但实际上这里没有必要使用额外的功能。那一级间接没有用。直接传递handleClick即可。