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进行代码分割，按需加载组件，提升应用加载速度和性能。