React
ReactApp
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
const container = document.getElementById("root") as HTMLDivElement;
ReactDOM.createRoot(container).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
Hook
hook实现单独的模块逻辑，返回新的状态实例；
useEffect
const useAuthState = (): User | null => {
const [user, setUser] = useState<User | null>(null);
// 渲染时监听，销毁时取消监听
useEffect(() => {
const unsubscribe = onAuthStateChanged(firebaseAuth, (user) => {
setUser(user);
});
return unsubscribe;
}, [firebaseAuth]);
return user;
};
Context
context实现全局共享的应用状态
import { useAuthState } from "@/hooks/useAuthState.ts";
import type { User } from "firebase/auth";
export const UserContext = createContext<User | null>(null);
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
const user = useAuthState();
return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};
export default function App() {
return (
<UserProvider>
<Router></Router>
</UserProvider>
);
}
Typescript
类型支持
安装 类型定义
npm install @types/react @types/react-dom -D
React特性在TypeScript使用，详见 使用 TypeScript – React 中文文档
React类型
React.FC：react函数式组件类型，即函数式组件结构实现的组件类型
React.ComponentType：react函数和类组件类型，即包含React.FC 与继承 React.Component 类组件
React.ReactElement：React 元素（JSX）的渲染结果类型
React.ReactNode：所有可以被渲染的类型
