React useSearchParam钩子

跟踪浏览器的位置搜索参数。

• 使用useCallback()钩子创建一个回调函数，该函数使用URLSearchParams构造函数获取param的当前值。
• 使用useState()钩子创建一个状态变量，用于保存param的当前值。
• 使用useEffect()钩子设置适当的事件监听器，在挂载时更新状态变量，并在卸载时清除它们。

const useSearchParam = param => {
  const getValue = React.useCallback(
    () => new URLSearchParams(window.location.search).get(param),
    [param]
  );

  const [value, setValue] = React.useState(getValue);

  React.useEffect(() => {
    const onChange = () => {
      setValue(getValue());
    };

    window.addEventListener('popstate', onChange);
    window.addEventListener('pushstate', onChange);
    window.addEventListener('replacestate', onChange);

    return () => {
      window.removeEventListener('popstate', onChange);
      window.removeEventListener('pushstate', onChange);
      window.removeEventListener('replacestate', onChange);
    };
  }, []);

  return value;
};

const MyApp = () => {
  const post = useSearchParam('post');

```jsx
return (
  <>
    <p>Post参数值：{post || 'null'}</p>
    <button
      onClick={() =>
        history.pushState({}, '', location.pathname + '?post=42')
      }
    >
      查看帖子42
    </button>
    <button onClick={() => history.pushState({}, '', location.pathname)}>
      退出
    </button>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);