我想将React和PHP结合起来使用。

我们公司有一个用传统的PHP编写的系统。
完全用React等技术替换是不现实的。
因此，基本的机制将继续使用PHP。
但是，对于新功能，我们可能需要使用JS来调用API进行认证或操作DOM。

技术候选确定

1. 纯粹的 JavaScript

1. 虽然比以前好得多，但还是对 addEventListener 和 DOM 操作有些困难。

jQuery
感觉现在有点过时了。虽然很久没写过了，但跟习惯了 React 等框架后，DOM 操作变得很麻烦。

lit
可以使用 web components，但是有些库可能不太活跃。
想到 React，有那个库可用，还想用以前写过的那个呢。

svelte、solid、react
嗯，这些都和 PHP 结合起来还是挺困难的啦…

所以，经过多方考虑，当从php的A页面中读取时，有这个功能。
当从页面B中读取时，我们创建了这个功能。

调用React的一方

<div id="root" data-mode="auth"></div>

在中国，我们可以通过HTML或PHP来指定模式并调用它，大致如下。

在React中获取模式

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { AppProvider } from "./providers/AppProvider";

const rootElement = document.getElementById("root");
const mode = rootElement?.dataset?.mode;

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AppProvider>
      <App mode={AppModeSchema.parse(mode)} />
    </AppProvider>
  </React.StrictMode>
);

可以使用element.dataset.mode来获取mode的取值。
对于mode，我认为在TypeScript中用联合类型进行定义会更好。
既然是自己定义的mode，那么当发生不符合条件的情况时，最好使用zod来确保能够正确报错。

这是一个zodSchema的实例。

export const AppModeSchema = z.union([z.literal("index"), z.literal("auth")]);
// type
export type AppMode = z.infer<typeof AppModeSchema>;

这个样子嘛。

在 React 的 App.tsx 中进行路由分配。

type AppProps = {
  mode: AppMode;
};
export const App = ({ mode }: AppProps) =>
  match(mode)
    .with("index", () => <IndexPage />)
    .with("auth", () => <AuthPage />)
    .exhaustive();

使用ts-pattern编写全面的匹配是一个不错的选择。
您需要创建索引时的组件和认证时的组件，并进行调用。

这样，在首页上只需要把

放上即可，在认证页面上只需要把

放上即可。

考虑到React的重量，用lit可能更好。
因为希望使用为React特别设计的方便组件，所以考虑各种各样的事情。
比如将其转换成svelte的web组件，或者使用preact等等。
有很多不同的选择需要考虑……。

当需要更快速度时，我们需要考虑。

暂时使用React可更改模式在PHP的各种页面中。

如果有更好的方法，请告诉我。
起初可能会使用React，但当担心尺寸时，可能会转向preact之类的。