在当今前端开发领域,React凭借其组件化架构和声明式编程范式,已成为构建复杂用户界面的首选方案。本文将深入探讨React的高级应用场景,通过一系列精心设计的代码示例,展示如何打造高性能、可维护的现代化前端应用。
typescript
复制
// lib/recoil/atoms.ts import { atom, selector } from 'recoil'; export const userState = atom({ key: 'userState', default: async () => { const response = await fetch('/api/current-user'); return response.json(); }, }); export const userPermissions = selector({ key: 'userPermissions', get: ({ get }) => { const user = get(userState); return new Set(user.roles.flatMap(getRolePermissions)); } });
typescript
复制
// components/PaymentForm.tsx import { useMachine } from '@xstate/react'; import paymentMachine from './machines/payment'; const PaymentForm = () => { const [state, send] = useMachine(paymentMachine); return ({state.matches('idle') && ( )} {state.matches('processing') &&); };} {state.matches('success') && } {state.hasTag('error') && send('RETRY')} />}
typescript
复制
// components/VirtualList.tsx import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; const VirtualList = ({ items }) => ({({ height, width }) => ( );{({ index, style }) => ( )})}
typescript
复制
// components/SearchInput.tsx import { useTransition } from 'react'; const SearchInput = () => { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [isPending, startTransition] = useTransition(); const handleChange = (e) => { setQuery(e.target.value); startTransition(() => { searchAPI(e.target.value).then(setResults); }); }; return ({isPending ?); };: }
typescript
复制
// components/DataTable.tsx const DataTable = ({ children }) => { const [sortConfig, setSortConfig] = useState(null); const contextValue = useMemo(() => ({ sortConfig, onSort: setSortConfig }), [sortConfig]); return ({children} ); }; const Column = ({ field, children }) => { const { sortConfig, onSort } = useContext(TableContext); return ( onSort(field)}> {children} {sortConfig?.field === field && (
)} ); }; // 使用方式 姓名 年龄
typescript
复制
// types/utils.ts type DeepPartial= T extends object ? { [P in keyof T]?: DeepPartial ; } : T; type APIResponse = { data: T; error?: { code: number; message: string; details?: Record ; }; meta: { pagination?: { page: number; pageSize: number; total: number; }; }; }; // 组件Props类型推导 type Props = { as?: T; theme?: 'light' | 'dark'; } & React.ComponentPropsWithoutRef ;
javascript
复制
// webpack.config.js const { ModuleFederationPlugin } = require('webpack').container; module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'appShell', remotes: { auth: 'auth@http://localhost:3001/remoteEntry.js', dashboard: 'dashboard@http://localhost:3002/remoteEntry.js' }, shared: { react: { singleton: true }, 'react-dom': { singleton: true }, 'react-router-dom': { singleton: true } } }) ] };
typescript
复制
// tests/Button.stories.tsx export default { title: 'Components/Button', component: Button, parameters: { chromatic: { viewports: [320, 768, 1200] }, }, } as ComponentMeta; const Template: ComponentStory = (args) => (