react函数组件离开页面清除localStorage

在React函数组件中，可以使用useEffect钩子函数来监听组件的卸载事件，并在组件卸载时执行清除localStorage的操作。

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 在组件卸载时执行清除localStorage的操作
    return () => {
      localStorage.clear();
    };
  }, []);

  // 组件的其它代码

  return (
    // 组件的JSX代码
  );
};

export default MyComponent;

上述代码中，我们使用了useEffect钩子函数来监听组件的卸载事件。在useEffect的回调函数中，我们返回一个函数，这个函数会在组件卸载时被调用。在这个函数中，我们使用localStorage.clear()来清除localStorage中的所有数据。

需要注意的是，useEffect的第二个参数是一个空数组[]，这表示只在组件挂载和卸载时执行一次清除操作。如果没有传入第二个参数，那么每次组件更新时都会执行清除操作，这可能会导致性能问题