用途
本技能用于在优化 React Native Web 性能时提供参考模式，聚焦于打包体积、渲染性能以及 Web 专属优化。
主要能力
- 代码分割：使用动态导入进行懒加载，配合 React 的 lazy 与 Suspense。
- 记忆化：通过 React.memo、useMemo、useCallback 防止不必要的重渲染。
- 长列表渲染：使用 FlatList 高效渲染长列表，可配置 initialNumToRender、maxToRenderPerBatch、windowSize、removeClippedSubviews 等参数。
- 图片优化：使用优化后的图片格式与懒加载，在 Web 平台通过 loading: 'lazy' 实现。
- 样式优化：在组件外部创建 StyleSheet，避免每次渲染重新创建。
- Context 优化：使用 useMemo 记忆化 Context 值，避免不必要的重渲染。
- 常见模式：防抖输入（debounce）、Web 端 Intersection Observer 懒加载。
- 打包体积优化：通过 webpack.config.js 或 metro.config.js 配置别名（如 react-native$ 指向 react-native-web、lodash 指向 lodash-es）与 splitChunks 分包。
使用方式
技能以代码示例形式给出各类优化模式，包括：
- 动态导入示例：使用 lazy(() => import('./HeavyComponent')) 与 Suspense 包裹。
- 记忆化示例：memo 包裹组件，useMemo 缓存排序结果，useCallback 缓存事件处理函数。
- FlatList 示例：设置 keyExtractor、renderItem、initialNumToRender、maxToRenderPerBatch、windowSize、removeClippedSubviews、getItemLayout。
- 图片示例：在 Platform.OS === 'web' 时传入 loading: 'lazy'。
- 样式示例：在组件外调用 StyleSheet.create。
- Context 示例：UserProvider 中使用 useMemo 生成 value。
- 防抖输入示例：useEffect 中 setTimeout 300ms 后触发 onSearch。
- Intersection Observer 示例：非 Web 平台直接设为可见，Web 平台使用 IntersectionObserver 监听可见性。
- 打包配置示例：resolve.alias 与 optimization.splitChunks。
适用场景
适用于优化 React Native Web 应用的性能，尤其是需要减小打包体积、提升渲染性能、处理长列表、懒加载组件与图片、优化 Context 与事件处理的场景。
限制
资料未提供该技能的安装方式、收费信息、支持平台范围、版本要求或效果数据，这些内容暂未提供。