一次性初始化/重新挂载/便捷类型/优化技巧

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