

**内****存溢出泄露日常注意开发点（重要）：**

[h](https://www.e-cology.com.cn/ecode/playground/doc/share/view/916720057536380929?ticket=ST-96760-2RNb03hG14CFxCn9eZrv-https://www.e-cology.com.cn#1%E3%80%81%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8)[ttps://www.e-cology.com.cn/ecode/playground/doc/share/view/916720057536380929?ticket=ST-96760-2RNb03hG14CFxCn9eZrv-https://www.e-cology.com.cn#1%E3%80%81%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8](https://www.e-cology.com.cn/ecode/playground/doc/share/view/916720057536380929?ticket=ST-96760-2RNb03hG14CFxCn9eZrv-https://www.e-cology.com.cn#1%E3%80%81%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8)

### 1. 必要的memoize、useMemo缓存，减少计算

```typescript
import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const expensiveResult = useMemo(() => {
    // 执行昂贵的计算或处理逻辑
    // 返回结果
    return data.filter(item => item.value > 10);
  }, [data]); // data 作为依赖项，当 data 变化时重新计算

  return (
    <div>
      {/* 使用 expensiveResult 进行渲染 */}
    </div>
  );
}
1、memoize 是一种通用的函数级优化技术，用于缓存函数的返回值，避免重复计算。
2、useMemo 是 React 的钩子函数，用于在函数组件中缓存计算的结果，避免在每次渲染时重复计算。
memoize 可以用于普通 JavaScript 函数，而 useMemo 只能在 React 函数组件中使用。
如果需要在普通 JavaScript 函数中进行优化，可以考虑使用 memoize。如果在 React 函数组件中需要缓存计算结果，可以使用 useMemo。
```

### 2. 渲染控制优化

2.1 局部状态setState优化、异步函数减少set次数，统一set优化

```typescript
不友好的：
if(true){
	this.setState({a:1})
}

this.setState({b:1})

建议：
const temp;
if(true){
	temp.a = 1
}

temp.b=2;
this.setState(...temp)
```

2.2 runInAction的使用

```typescript
不友好的：
if(true){
	runInAction(()=>{
		this.a = 1
    })
}

	runInAction(()=>{
		this.b = 1
    })

建议：
	runInAction(()=>{
		if(true){
			this.a = 1
		}
		this.b = 1
    })
```

### 3. 子组件传递函数定义及对象定义

3.1 对于函数内部存在的场景

[图片附件未整合: _assets/892597773169147905/001-1e15e3ba83.png]

3.2 定义对象传递，两种场景

[图片附件未整合: _assets/892597773169147905/002-013bddd3c5.png]

总结： 已上两种场景总的来说都是在list的customerrender中重新定义了新对象，导致子组件 Card做了不必要的重复渲染

### 4. 包体积需要控制

**4.1 Provider提供的数据或者store，尤其是store，必须放在React.lazy封装的组件内部，不能放在外部直接导出，否则store将被全量导出，包体积会非常大。**

[图片附件未整合: _assets/892597773169147905/003-899ba03fe2.png]

4.2 通过lib导出给外部的组件需要通过React.Lazy异步导出

4.3 条件加载的子组件也需要React.Lazy异步导出，尤其是子组件引入了其他内容，导致自身很大的  
[图片附件未整合: _assets/892597773169147905/004-db7f51cf85.png]

### 5、包体积文件调整(ebdlist项目为例)

现象:  突然发现Parsed包lib体积超过了500kb

分析:  yarn analyzer 支持查看后发现,lib下被打入了及时kb的常量constants文件

处理方案:

1. 迁移公用函数,避免非必要的函数被打入lib

[http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/56368f1fcf237e508f4223112865bd28bc6ea48b](http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/56368f1fcf237e508f4223112865bd28bc6ea48b)

[http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/0d1a3704a5edd79e333b448f21abf432f7dfeccd](http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/0d1a3704a5edd79e333b448f21abf432f7dfeccd)

2.必要的chunk包文件,且注意过小的内容没必要

[http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/c2c8185e891ffd5144dcf6fc0b7d3df95a5a9006](http://10.12.101.12/EBUILDER/weapp-ebdlist/-/commit/c2c8185e891ffd5144dcf6fc0b7d3df95a5a9006)

注： 常量存在多出调用的，单独抽取一下,效果如下

[图片附件未整合: _assets/892597773169147905/005-16e514ba3f.png]

### 6、日常开发考虑点

1、文件解耦，规避互相引入

2、

### 7、

### 8、
