react的render问题?

// 为什么即使我这么写,每次点击修改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>
  );
};
阅读 1.5k
3 个回答
✓ 已被采纳

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

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

image.png
你这里有清除effect。

useEffect(() => {

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

}, [data]);

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

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏