react的render问题？

Question

// 为什么即使我这么写，每次点击修改list数据时候，点击事件也只会触发一次呢。
// 每次render的时候，handlerFn不是都重新生成了吗，而且每次修改list数据时候，不是都重新执行了一次window.addEventListener('click', handlerFn);吗


export default () => {
  const [data, setData] = useState([]);


  const handlerFn = () => {
    console.log('触发了事件~~~');
  };


  useEffect(() => {
    window.addEventListener('click', handlerFn);
    return () => {
      window.removeEventListener('click', handlerFn);
    };
  }, [data]);

  return (
    <div>
      <div onClick={() => {
        setData([{age: new Date()}]);
      }}>
        点击修改data数据
      </div>
    </div>
  );
};

Answer 1

在组件每次重新渲染前，React 会首先执行 cleanup 函数（useEffect 返回的函数）。
在你的代码中，cleanup 函数会移除上一次的监听事件，自然就不会重复执行监听事件了。

useEffect(() => {
  // 添加监听事件
  window.addEventListener('click', handlerFn);
  return () => {
    // 移除监听事件
    window.removeEventListener('click', handlerFn);
  };
}, [data]);

Answer 2

你这里有清除effect。

Answer 3

useEffect(() => {

window.addEventListener('click', handlerFn);
return () => {
  window.removeEventListener('click', handlerFn);
};

}, [data]);

这里有显式的清除 handlerFn 事件，相反如果想多次注册吗，那就不要清除

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。