React useTitle Hook

设置页面的标题

• 使用 typeof 来确定 Document 是否已定义。
• 使用 useRef() 钩子来存储 Document 的原始标题（如果已定义）。
• 使用 useEffect() 钩子在组件挂载时将 Document.title 设置为传递的值，并在卸载时清理。

const useTitle = title => {
  const documentDefined = typeof document !== 'undefined';
  const originalTitle = React.useRef(documentDefined ? document.title : null);

  React.useEffect(() => {
    if (!documentDefined) return;

    if (document.title !== title) document.title = title;

    return () => {
      document.title = originalTitle.current;
    };
  }, []);
};

const Alert = () => {
  useTitle('Alert');
  return <p>警告！标题已更改</p>;
};

const MyApp = () => {
  const [alertOpen, setAlertOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setAlertOpen(!alertOpen)}>切换警告</button>
      {alertOpen && <Alert />}
    </>
  );
};

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

ReactDOM.createRoot方法用于创建一个根节点，并将根节点渲染到指定的DOM元素上。在这个例子中，我们将根节点渲染到id为"root"的DOM元素上。

是一个自定义的组件，它将作为根节点的子节点进行渲染。你可以将替换为你自己的组件。

注意：这段代码使用了JSX语法，需要使用Babel或类似的工具将其转换为普通的JavaScript代码。