一次性初始化/重新挂载/便捷类型/优化技巧
React中一次性初始化
在React中进行一次性初始化的两种推荐方案如下：
方案 1 使用useState进行初始化：
javascriptCopy code
const [resource] = React.useState(() => new Resource());
这种方法通过状态的惰性初始化来创建资源，代码直观且易于理解。
方案 2 使用useRef保持实例不变：
javascriptCopy code
const resource = React.useRef(null); if (!resource.current) { resource.current = new Resource(); }
尽管这种方法有效，但相比方案1，其直观性稍逊一筹。
使用useState而不是useMemo的原因详见文章：使用 useState 进行一次性初始化
使用 key 重新挂载组件
当需要根据props变化重新挂载组件时，可以通过改变组件的key属性来实现：
javascriptCopy code
<DetailView key={selected.id} initialEmail={selected.email} />
更多详情可查看：利用Props和State
便利写法
声明状态及其设置函数时指定类型：
javascriptCopy code
const [age, setAge] = React.useState<number>();
React优化技巧
React Developer Tools
启用“Highlight Updates”复选框，以绿色闪烁的形式显示重新渲染的组件，帮助识别性能瓶颈。
使用console.time测量与useMemo优化
利用console.time测量慢速操作，比较使用useMemo前后的性能差异。
why-did-you-render
监控并记录组件每次重新渲染的详细原因，例如变化的props或state，帮助优化渲染性能。
react-window
采用虚拟列表渲染技术优化长列表的渲染性能。
代码分割
使用React.lazy或loadable-components进行代码分割，按需加载组件，提升应用加载速度和性能。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！