吐司问卷：性能优化

吐司问卷：性能优化

Date: March 9, 2025 10:39 PM (GMT+8)

---

目标

• 缓存数据，減少计算
• 代码分析和拆分，优化首页代码体积

**注意事项：**优化要根据实际情况，不要先行优化

---

---

---

React 优化

要点：

• 缓存数据，减少计算

useState 传入函数

要点：

• useState 传入普通变量，每次组件更新都会执行
• useState 传入函数，只在组件渲染时执行一次
• 适合数据结构复杂、计算成本高的场景，

Case: useState 传入普通变量，每次组件更新都会执行

import React, { FC, useState } from 'react'

const Demo: FC = () => {
	console.log('Render');
	const [arr, setArr] = useState(['A', 'A', 'A'])
	const handleClick = () => {
		setArr(arr => [...arr, 'd'])
	}
	return (
		<div>
			<div>{arr}</div>
			<button onClick={handleClick}>add</button>
		</div>
	)
}

export default Demo

Case: useState 传入函数，只在组件渲染时执行一次

import React, { FC, useState } from 'react'

const genArr = () => {
	console.log('genArr...');
	const arr = Array(3).fill('A')
	return arr
}

const Demo: FC = () => {
	console.log('Render');
	const [arr, setArr] = useState(genArr)
	const handleClick = () => {
		setArr(arr => [...arr, 'd'])
	}
	return (
		<div>
			<div>{arr}</div>
			<button onClick={handleClick}>add</button>
		</div>
	)
}

export default Demo

理解：genArr 只在组件渲染时执行一次

---

---

useMemo

要点：

• 函数组件，每次 state 更新都会重新执行函数
• useMemo 可以缓存数据，不用每次执行函数都重新生成
• 可用于计算量较大的场景，缓存提高性能

useMemo使用场景：

• 依赖项不经常变化
• 缓存的元素创建成本较高

Case: 二维码生成

比如生成二维码，依赖项为 id 和 isPublished，二维码的创建成本一般较高，就可以采用 useMemo

import React, { FC, useRef, useMemo } from 'react'
import {
  Space,
  Button,