本文是参考微信小程序官方文档提炼的内容，个人学习笔记。



1. 小程序技术与web技术很大程度的相似，很多在web上能进行的优化在小程序上同样可以；
2. 研究小程序的性能前，先要深入了解小程序的运行机制；
3. 性能和体验优化可围绕 “加载时机（懒/预）”、“启动or运行”、"空间换时间（缓存）"， “场景”等维度去考虑

# 小程序运行机制
## 启动时
![image.png](https://blog.warmplace.cn:11443/static/img/4081a9323b6a890508bd7b00c19c2c46.image.webp)

## 更新机制
![image.png](https://blog.warmplace.cn:11443/static/img/9d8f1125f9a4dd7f1a584ff050a6dc6d.image.webp)

## 启动中的一些关键节点

- [ ] 1. 环境准备阶段，获取小程序基本信息 &emsp;&emsp;无法优化（微信内部机制）
- [ ] 2. 紧跟小程序基础库更新&emsp;&emsp;无法优化
- [x] 3. 代码拉取&注入阶段&emsp;&emsp;可以优化
- [x] 4. 合适的生命周期函数节点（数据拉取/业务逻辑/渲染）
- [x] 5. Page.onReady事件派发、首屏渲染完成阶段

## 双线程模型
- 视图层有多个，一个页面对应一个视图层
- 逻辑层只有一个，方便状态复用
- 视图层和逻辑层都是沙盒环境
- 视图层本质是`Webview`，使用了`Exparser`框架自定义组件，与`WebComponent`的`ShadowDom`高度相似，区别是`css`不隔离，并内置了一些组件及原生组件，`Exparser`可以在`webview`运行本质是执行了一些`script`垫片， 所以小程序有代码注入阶段一说法。
- 逻辑层也是一个沙盒环境，隔离了一些`window`对象，新增了一些小程序对象（`wx`, `Page`, `Component`）
- 逻辑层和视图层通过`JS bridge`通信，数据序列化传输，这里是一个瓶颈，所以有`setData`优化及`wxs`技术

# 启动阶段性能优化
## 代码拉取阶段 
该阶段既能减少代码下载时间又能减少代码注入的时间
- 分包
   - 单个包`2M`，最多`20M`, 根据具体也如场景进行分包， 如将`tabbar`页面放在主包中
- 独立分包
   - 如果对启动性能有很高的要求，可以将一些 广告、活动页或支付页等相对独立的页面放在独立分包中
- 分包预加载
   - 优点：提高后续操作的体验，缺点：耗费一些流量
- 分包异步化
   - 如果 分包`B`与分包`C`同时依赖一个通用组件 `commonA`，默认会将`commonA`组件打到主包中，更好的方案时将分包共同依赖的组件打包到另一个包中
- `treeSharking` ?  开发者工具会进行`treeSharking`吗? 还是通过通过构建工具进行`treeSharking`? TODO
- 小程序已经内置了`corejs`垫片，所以不需要处理`es6 API`，`babel`只需处理`es6`句法（新语法）
- 控制代码包内的资源文件 
   - 图片视频音频字体等，可以考虑使用cdn

## 代码注入阶段
通常情况下，在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。

- 按需注入 `"lazyCodeLoading": "requiredComponents"`   `app.json` 里面配置
- 用时注入，在按需注入的基础上配置占位元素
- 启动时减少同步API调用
- 启动时避免复杂的运算
- 周期性更新

# 首屏渲染优化
`First Paint`/`First Contentful Paint`

- 使用「按需注入」和「用时注入」
- 初始化渲染缓存		一般用于静态内容的页面
- 骨架瓶				一般用于动态内容，与前者不建议一起使用，只是缓解用户等待的焦虑，事实上还略有增加首屏渲染时间
- 精简首屏数据/提前请求/缓存数据
- 合理规划版本发布（一定程度降低冷启动的时间）
- 数据预拉取

# 运行时优化
## 合理使用setData

- 减少setData频次
- 减少setData数据量，只传渲染更新的最小量数据
- 需要频繁更新的页面元素（例如：秒杀倒计时），可以封装为独立的组件，必要时可以使用 [CSS contain 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)限制计算布局、样式和绘制等的范围。
- 控制后台的`setData`

## 渲染性能优化
- 适当监听页面或组件的`scroll`事件
   - 非必要不监听 `scroll` 事件
   - 在实现与滚动相关的动画时，优先考虑[滚动驱动动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#%E6%BB%9A%E5%8A%A8%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%8A%A8%E7%94%BB)（仅 [`<scroll-view>`](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)）或 [WXS 响应事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html)
- 选择高性能的动画实现方式
   - 优先使用 `CSS` 渐变、`CSS` 动画、或小程序框架提供的其他[动画实现方式](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)完成动画；
   - 如果上述方式不能满足，可以使用 [WXS 响应事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html) ，减少`callMethod`方法调用
   - `requestAnimationFrame`代替定时器，节流
   - 高频渲染的地方抽取成组件
- 使用 `IntersectionObserver` 监听元素曝光
- 控制 `wxml` 节点数量及层级
- 图片优化
   - 使用图片服务器压缩剪裁图片
   - 图片懒加载
   - 图片定高定宽，避免滥用widthFix/heightFix 模式

## 页面切换优化
非常建议了解下页面切换的执行流程
![image.png](https://blog.warmplace.cn:11443/static/img/0849ea61d13f8f9e36681aeb707cd6d2.image.webp)

从上图可以看出主包及公共代码一定要精简，是对页面切换影响最大的因素。

- 首屏渲染优化
- 提前请求数据，页面之间可以通过 [EventChannel](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E9%A1%B5%E9%9D%A2%E9%97%B4%E9%80%9A%E4%BF%A1) 进行通信
- **控制预加载下个页面的时机**

## 内存优化
- 合理使用分包加载， 使用按需注入和用时注入
- web内存泄漏垃圾回收的方法同样适用
   - 未清理的定时器
   - 闭包及时回收
   - 事件监听未及时解绑   wx.offLocationChange

# 特殊场景的优化
- 长列表
- 滚动监听

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

以下内容为草稿

微信小程序性能指标

![image.png](https://blog.warmplace.cn:11443/static/img/c055416faaa1f3e69d184276de13623a.image.webp)

> 1. 微信：[微信公众平台-小程序](https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18092610)---[文档](https://developers.weixin.qq.com/miniprogram/dev/index.html)
> 2. 支付宝：[蚂蚁金服开发平台-小程序](https://mini.open.alipay.com/channel/miniIndex.htm)---[文档](https://docs.alipay.com/mini/developer/getting-started)
> 3. 淘宝：[淘宝开发者平台](https://open.taobao.com/?spm=a219a.14658873.1.1.3d0e4dc1qltrH6)---[文档](https://open.taobao.com/doc.htm?docId=73&docType=1)
> 4. 百度：[智能小程序](https://smartprogram.baidu.com/mappconsole/main/login) --- [文档](https://smartprogram.baidu.com/docs/introduction/enter_application/)

微信小程序性能优化

本文写作已有一年半了迁移自老博客。系统梳理了uni-app开发小程序与web开发的异同，踩坑笔记。另外简单介绍了Uniapp框架小程序端的设计思路。



# 官方介绍
> **uni-app理念**
> 1. **为开发者提供免费、高效的开发工具，让天下没有难做的应用**
> 2. **改进应用形态，让用户更方便的获取数字服务**

## 推荐理由
1. **跨平台更多**（开放包容策略）
   1. 真正做到一套代码多端发行
   2. 条件编译优雅的在一个项目中调用不同平台的特色能力，
   3. 可单独针对某个、某几个平台写组件或者页面
   4. `uncloud` 解决小程序云开发跨平台问题
2. **运行体验更好**
   1. 组件、`api` 与微信一致
   2. 兼容`weex`原生渲染
3. **通用技术栈学习成本低**
   1. `vue`的语法微信的`api`
   2. 内嵌`mpvue`
4. **开放生态组件更丰富**
   1. 支持通过`npm`引用第三方包
   2. 兼容`mpvue`组件及项目
   3. `App`端支持和原生混合编码
   4. `DCloud`将发布插件市场

## 与vue的关系
- 使用`vue`语法开发
- 在`h5`端支持`vue`的完整语法
- **在`app`和小程序实现了大部分`vue`语法**

## 与小程序关系
- 组件标签靠近小程序规范
- 应用及页面生命周期使用小程序生命周期，组件使用vue生命周期 
- 接口能力靠近微信小程序规范
- 使用vue语法开发遵循vueSFC规范
   - 数据绑定及事件遵循vue规范
- 多端兼容建议使用**flex布局**[详见这里](https://uniapp.dcloud.io/matter.html#h5-%E5%BC%80%E5%8F%91%E6%B3%A8%E6%84%8F)

## 学习建议
> uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。
> 每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：
> - 比如H5端的浏览器有跨域限制；
> - 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
> - 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
> - 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
> - 如果你的App要使用三方sdk，比如定位、地图、支付、推送...还要遵循他们的规则和限制；
> 
遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。

# 踩坑笔记
> 本人有一年多的`uni-app`开发三端（h5、微信小程序、支付宝小程序），**老实说跨端的坑太多了**，尤其是早期。
> 下面的踩坑总结 也说明**uni-app跨端只做了浅层磨平**。
> 
> 事实上根据uniapp官网文档 [跨端注意](https://uniapp.dcloud.io/matter.html) 、 [非h5端不支持的的vue语法](https://uniapp.dcloud.io/tutorial/vue-components.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8D%E6%94%AF%E6%8C%81%E5%88%97%E8%A1%A8) 这两篇文章的介绍，真正属于`uniapp` 的坑很少，
> 官方文档也只是说了大概，还有很多坑时来自h5与小程序差异的细节（比如`IntersectionObserver`、下拉刷新）


## 样式兼容性问题
准确来说这一块并非`uni-app`问题，以下内容是本人使用uni-app项目开发中遇到的问题。

- `calc`函数    `ios 10`系统不支持， `android`有些低版本也不支持具体版本记不清了
- `position: fixed`
   - 如果父元素增加了`transform`， 然后其子元素`fixed-to-container`便以父元素为参考对象了。这其实也不算是兼容性问题，属于CSS知识点了
   - 设置为`fixed`布局 微信小程序的上拉刷新
- `ios 10` 不支持 `HTMLElement.style`直接赋值，推荐使用`setAttribute`方法
- `autofocus`
   - 在小程序端可以完美的支持 自动聚焦&弹起软键盘
   - 在`h5` `andriod`上会自动聚焦但不会弹软键盘，但如果手动点击过一次，再`focus`方法就可以了
   - 在`h5` `ios`上 既不会自动聚焦也不会弹软键盘，但手动点击过一次后，再调用`focus`方法就可以了
- ios 回弹问题
   - 如果在APP里面，ios可以关闭webview的回弹，但仅仅是最外层
   - h5可以同过hack的方式关闭回弹， 原理是监听scroll设置`overflow：hidden`,在开启scroll
- ios h5页面 双击会滚动到底部 解决方案 [监听touchend事件](https://blog.csdn.net/weixin_38337995/article/details/121637926)
- 刘海问题
   - ios  
      - 11之前的系统没有刘海问题
      - `11.0 ～11.2(不包含)` 使用 `constant`
      - `>=11.2` 使用 `env`
   - `anroid`建议给一个默认高度就好一般`40px`, 或者让`app`提供`bridge`方法获取状态栏高度
- `position:sticky` 在 `android 5~6`系统中存在兼容问题
- ~~小程序上设置样式作用域`scoped`不生效~~ &emsp; (最新测试是有效的)
- `scroll-view`中如果有fixed布局，在ios手机中滚动会出现一些奇怪的渲染问题

## 微信小程序上的兼容问题
- `scroll-view`
   - `scroll-view`区域，不能使用小程序的下拉刷新功能
   - `@scrolltolower` (原生`bindscrolltolower`）事件，滑动过快可能不会触发，可以把`lower-threshold`设置大一点，会缓解很多很多。
- 插槽  小程序上不支持 `v-else-if` `v-else`
- 模版语法方面，小程序上稍弱
   - 小程序上不支持 `:style="customeStyle"`  但是支持 `:style="{height: customeHeight}"`
   - :key不支持表达式
   - `v-for="it in list.slice(0,3)"`   小程序上不支持 ，要这样写 `v-for="it in computedList"`
   - `<comp :text="getText(classes[index])"></comp>`  不支持，要写成 `:test(getText(index))`
- 事件机制
   - 不支持触发多个事件 比如 
   - `{this.$emit('input', 123); this.$emit('select', 123)}`
- `v-show`  微信小程序组件上`v-show`不生效
> `uniapp`官方对组件上`v-show`不支持的解释<br />
> 因为小程序没有`v-show`，只有`if`，<br />
> 另外还有`hidden`这个属性，但这个是作为属性而不是条件控制。<br />所以如果打算生成小程序的话，还是用`v-if`来控制，非要用`v-show`的话，可以自己通过`style`模拟这个效果。

- 小程序对变量赋值`undfined`不会触发刷新  [原因点这里](https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee81299cab83b0086dba4e56c0a)
- `e.preventDefault`  `e.stopPropagation` 不支持条件控制，只能在模版上写死
- `uni.createIntersectionObserver` 该API坑比较多
   - `reactiveToViewport`
      - h5上表现是相对滚动容器会否可见
      - 微信小程序上是相对屏幕（即使被其他元素遮挡了，该API告诉你元素在可见区）
   - `observe`
      - h5上可以调用多次
      - 小程序上只能调用一次

- `easycom`的bug，不支持作用域插槽

## 微信小程序与WebComponts
先来看一个案例<br />
左侧是h5 右侧是 微信小程序<br />
![image.png](https://blog.warmplace.cn:11443/static/img/9ed71fd0e49370397bfe1ab71ab5dde8.image.webp)
之所以渲染的结果不一样 是因为微信小程序的组件使用后了 ShadowDOM（这个差异正式ShadowDom产生的）<br />
解决方案
- 在组件上增加样式 `<testComp class="hack"></testComp>  .hack{width: 100%}`
- 在组件内增加样式 `:host {width: 100%}`

讲道理 如果使用了`ShadowDOM`那么样式应该是隔离的，<br />
事实上确实有部分东西是隔离的如css变量的获取，但组件的样式却不是隔离的，也就是 使用 `.content .test-comp{} `外层可以修改组件样式。

后来看了下微信的文档 ，微信小程序使用的`Exparser`框架，**Exparser的组件模型与WebComponents标准中的ShadowDOM高度相似,但并非完全一致**

补充： 支付宝小程序自定义组件没有使用`WebComponets`技术。

## 支付宝小程序踩坑笔记
- 组件上写`class`不生效
- 多次组件嵌套 多个具名插槽好像不支持
- 不支持作用域插槽
- `my.getSystemInfo` 返回值有属性`screenWidth`是逻辑宽度（物理宽度*像素比DPR）
- `slot`不支持备用插槽
- `@touchmove.stop.prevent`不生效

# 最佳实践
## 生命周期
- 页面上使用小程序声明周期书写业务逻辑（页面不推荐使用vue生命周期否则你会看到h5正常小程序不正常）
- 组件上推荐使用`vue`的生命周期 
- 定时器的使用 在`onShow`开启， 在`onHide` `onUnload`生命周期中销毁
- 定时器推荐写在页面上，因为组件上没有`onShow` `onHide`方法， [详见这里](https://uniapp.dcloud.io/matter.html#h5-%E5%BC%80%E5%8F%91%E6%B3%A8%E6%84%8F)
- `onHide`跳到其它页面触发   `onUnload`在`redirectTo`或`navigateBack`时触发


## 样式
- 样式推荐使用flex布局

## 组件编写
- 模版上别使用复杂的表达式，用方法代替表达式
- 以上踩坑笔记可以借鉴，作为多些写通用代码，通用组件的参考

# uni-app框架原理及优化策略
## 跨平台实现原理图
> 注： 这里是官方文档的两张图，先体会一下。

![image.png](https://blog.warmplace.cn:11443/static/img/e1350a11b0bc4c6c94d5405d6fdf35b7.image.webp)

![image.png](https://blog.warmplace.cn:11443/static/img/f2f8257412140e87b76f6fdc947fee29.image.webp)

总结
- **`uniapp`以微信小程序`API`为基准，把通用的组件和接口都`uni`化了**
- **不能通用的组件及接口则使用条件编译或单独针对该平台书写组件代码**

## uni-app小程序设计思路
`uni-app`是比较传统的小程序框架，包括**编译器和运行时**。<br>
小程序是视图层和逻辑层分开的双线程架构。<br>
那么我们来分析一下使用Vue开发的代码如何在微信小程序上运行呢？

1. 首先对于视图层，必须将vue中的template模版语法转换为小程序的wxml语法，这是唯一方案
2. 对于逻辑层，要使用小程序的路由`page.json`，那么对于uni-app来说就需要多入口打包，生成小程序各页面所需`JS`。这两步是编译器做的事情，除此之外还有css的转换。
3. Vue是响应式的，小程序也是响应式的，那么肯定需要把vue的响应式融入到小程序，这就是uni-app运行时做的事情包含一下内容
    - 不需要VDOM patch函数diff的是数据，调用setData传到是视图层
    - 因为组件使用的是Vue生命周期，这里需要转换为小程序的生命周期
    - 事件也要进行映射（映射关系纪录在wxml文件的标签属性`data-event-opts`上）
4. uni-app小程序框架需要对vue框架进行一些改造，如下图
![image.png](https://blog.warmplace.cn:11443/static/img/71d1d02526b0bd5c0e753ee1237f4223.image.webp)

- `compile`不需要静态标注
- `render`不需要生成`VNode`
- 补丁的生成是直接`diff`，然后`setData`

思路有了，还是建议在 uni-app项目中通过 JavaScript调试终端 运行`npm run build:mp-weixin`命令进行调试， 入口文件是`node_modules/.bin/vue-cli-server`，在这里设置断点。

可以参考这篇文章[《uni-app是如何构建小程序的》](https://juejin.cn/post/6968438754180595742) 边读边调试。好文章在我这里绝不藏着掖着，也绝不照搬抄袭，这里我也偷个懒，以下内容记录我个人的总结，不做深入解读，仅供参考。

## uni-app运行时
uni-app `runtime` 主要做了三件事情
- 数据同步机制
- 事件代理机制
- 生命周期映射

![image.png](https://blog.warmplace.cn:11443/static/img/822b454670e7cc14a6e88b999767d074.image.webp)

## uni-app编译时
- `uni-app` 是基于 `vue-cli` 的扩展
- `vue-cli` 运行会加载 `package` 的 `devDependencies` 对象中 以 `vue-cli-plugin-*` 命名的插件，即加载 `@dcloudio/vue-cli-plugin-uni` 插件
- `vue-cli` 的插件机制在执行插件时会传入两个参数一个是service实例对象（有个plugins属性包含所有插件实例），一个是webpack参数对象，有了这两个参数，`@dcloudio/vue-cli-plugin-uni`可以做任何事情。

`@dcloudio/vue-cli-plugin-uni`做了以下事情
1. 多入口打包
    - 根据参数获取平台信息，找到`lib/mp.js`, `mp.js`会一个新的webpack参数对象，它内部会解析`pages.json`生成多入口对象`process.UNI_ENTRY`，即webpack参数对象的entry属性，`entry: () => process.UNI_ENTRY`
    - 使用`module-alias`修改`template`编译指向，分发个平台
    - `webpack-preprocess-loader` 	处理条件编译
    - `webpack-uni-pages-loader`  		该 `loader` 作用于 `src/pages.json`，解析生成项目及各页面的 `config`，并配合 `wrap-loader` 将转换后的结果引入 `src/main.js` 中
    - `wrap-loader`			自动引入各平台运行时兼容
2. 原`vue-loader`会把`vue`拆分为`template`、`style`、`script`三块内容再分发给不同的`loader`。 `uni-app`则对`vue-loader`的分发进行了更改
```js
{
  resourceQuery: /vue&type=script/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/script'
  }]
},
{
  resourceQuery: /vue&type=style/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/style'
  }]
}
{
  resourceQuery: /vue&type=template/,
  use: [{
    loader: '@dcloudio/webpack-uni-mp-loader/lib/template'
  }]
}
```
- `uni-mp-loader/lib/template.js` 把vue模版语法转换为小程序模板语法
- `uni-mp-loader/lib/script.js` 使用babel对js句法翻译，生命周期映射、事件代理等
- `uni-mp-loader/lib/style.js` 多插入一些`nomaliize`样式用于磨平平台差异


vue语法转成小程序语法
- 生命周期转换
- 模版语法转换 
   - 数据绑定  `:key="val"`&emsp;>>	&emsp;`key={{val}}`
   - 显示隐藏 `v-show`/`v-if`&emsp;>>&emsp;`hidden`/`wx:if`
   - 列表渲染 `v-for`&emsp;>>&emsp;`wx:for`
   - 双向数据绑定 `v-model="myModel"`&emsp;>>&emsp;`value={{myModel}}`/`bindinput`/`setData`
   - 取值  `this.key`&emsp;>>&emsp;`this.data.key`
- 事件 & 传参数 
   - `@event`&emsp;>>&emsp;`bindtap="" catchtap=""`
   - 父传子 `:prop`&emsp;>>&emsp;`bind:prop`
   - 子传父 `this.$emit('myevent', data)`&emsp;>>&emsp;`this.triggerEvent('myevent', data)`
   - `$refs`&emsp;>>&emsp;`selectComponent`
- 组件注册 
   - `import`  + `配置components`&emsp;>>&emsp;子组件`component: true` 父组件 配置`useComponents`
- 。。。。。。

此外还有一些loader
- `webpack-preprocess-loader`&emsp;处理条件编译
- `wrap-loader`&emsp;&emsp;自动引入个平台运行时兼容

## 总结
![image.png](https://blog.warmplace.cn:11443/static/img/9f0e93404ff1c9e7217317d4a034c774.image.webp)

# uni-app性能优化
## setData优化
减少调用setData数据量
- 改写了`Vue`的`patch`实现，删掉了`vnode`，仅`Diff Data`数据 （包减少30%）
- `nextTick`机制保证不会重复`setData` 
- 借鉴westore `JSON Diff` 实现高效、精准的差量数据

 差量更新的本质是调用小程序的setData方法(小程序支持setData本身支持细粒度更新)<br />`this.setData({'obj.list.0.name': '细粒度更新'})`

## 其他优化
- 自定义组件实现局部数据刷新

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

以下内容为草稿

uniapp项目升级

- `npx @dcloudio/uvm `
- `npx @dcloudio/uvm 3.2.12.20211029`

Uniapp学习笔记

本文是基于微信小程序官网及网上的一些文章做的总结， 一些内容比较抽象主要用于复习巩固，对于没有小程序开发经验的同学还是推荐先阅读小程序官方文档，写写案例。



# 背景
> - 2016年，应用号 -> 小程序，1月张小龙提出应用号，11月微信小程序开发公测
> - 2017年，1月微信小程序正式发布
> - 2018年，1月大量企业、开发者、资本、运营入场；3月，十家手机厂商推出快应用；9月支付宝小程序正式上线、百度小程序入场、头条小程序入场，10月抖音小程序入场
> - 2022年，微信小程序日活用户超5亿

# 微信小程序架构
- 双线程模型 逻辑层和渲染层是分开的
- 使用类似于微信 JSSDK 这样的 Hybrid 技术（即界面主要由成熟的 Web 技术渲染，辅之以大量的接口提供丰富的客户端原生能力）。

## 微信已经有了公众号生态为什么还要造个小程序生态
公众号模式有哪些问题？
- 如果任由a标签可以任意跳转 （跳到哪里微信不知道，跳出去的网站可能涉及安全问题）
- js可以操作dom，如触发点击事件，可能在用户不知情的情况下获取了用户的隐私。
- 任由ajax随便请求，存在CSRF攻击的风险，在微信生态下的问题，也会给微信带来一些商誉影响
- eval、Function 等可能引发 XSS 
- 自己造轮子除了更强的把控商家用户的行为，也给用户带来更好的体验，如使用微信or原生api的能力。
- 国家监控，国家会对微信提出一些整改要求，微信需要从技术层面限制把控商户的行为
- 。。。

根本原因： 
- 公众号模式还是一个web应用模式，web讲究开放互联，对于web应用来说微信的感知能力要差很多。
- 微信则是需要更加强有利的技术去感知商户及用户行为、管控商家、服务用户，增加用户黏性，获取更多的流量，塑造微信生态（形成超级APP），最后实现自己的商业壁垒。

直接原因：
- 为了**管控与安全**的需要同时兼顾了性能。关于管控与安全，对内来说微信自身有这个诉求，对外国家对它也有这个诉求。

## 为什么采用Hybrid技术
> 首先介绍下三种UI渲染技术
> 1. Native原生渲染：流畅可访问系统api 高留存；高成本、更新体验差
> 2. Web技术渲染：成本低、跨平台；无法使用系统功能、低留存
> 3. Hybrid混合渲染、web+native   （`cordova`、`h5+`）

采用Hybrid技术有一下优势
- 快速加载（本地加载资源+离线使用）体验优于web 接近原生体验
- 提供移动端的能力以及自己的能力
- 简单高效的开发及发布（web可以灵活发版，原生不能）

## 双线程模型
首先了解下双线程模型

![image.png](https://blog.warmplace.cn:11443/static/img/a4471ff266ae31400993ad5ddd5b4936.image.webp)

- 小程序的视图层和逻辑层分别由两个线程管理：视图层的界面使用Webview进行渲染；逻辑层采用JSCore运行JavaScript代码
- 一个小程序有一个逻辑层（方便逻辑状态共享），视图层有多个webview (主要是性能原因，DOM简单，页面切换也快)
- 两个线程间的通信则由 JSBridge 中转
   - iOS 是利用了WKWebView 的提供 messageHandlers 特性，
   - 而在安卓则是往 WebView 的 window 对象注入一个原生方法，最终会封装成 WeiXinJSBridge 这样一个兼容层，主要提供了调用（invoke）和监听（on）这两种方法。
- 使用双线程也是从管控与安全的角度考虑的，
   - 避免JS操作DOM
   - 提供一个沙箱环境来运行开发者的JavaScript 代码

![image.png](https://blog.warmplace.cn:11443/static/img/a58fae8e23eb9ca9bcaaf8d864759ed6.image.webp)

- 双线程缺点 ：  **天生的延时**

## 为什么要采用双线程？
> - 为什么不使用浏览器线程模型？
> - 为什么不使用 Web Worker？

不使用浏览器线程模型主要有两个原因

1. 前面提到的管控与安全
2. 浏览器JS 是单线程的，JS执行阻塞dom渲染，dom渲染阻塞JS

不使用WebWorker的原因 

- worker本身非常耗资源，除了计算资源消耗还有和主线程通信的损耗也很严重；小程序逻辑层和试图层是同级线程性能相对可靠
- web worker 限制也很多，不能跨域，双线程安全

## 小程序的运行机制

1. 启动

![image.png](https://blog.warmplace.cn:11443/static/img/4081a9323b6a890508bd7b00c19c2c46.image.webp)

2. 更新机制

![image.png](https://blog.warmplace.cn:11443/static/img/9d8f1125f9a4dd7f1a584ff050a6dc6d.image.webp)

## 小程序生命周期

![image.png](https://blog.warmplace.cn:11443/static/img/478e4731d69c6bf4957488123c4f1696.image.webp)

## 组件系统
也是从安全管控的要求考虑，不直接提供HTML的能力（如你不能使用`<a>`标签任意跳转）；
微信设计一套组件框架——`Exparser`。基于这个框架，内置了一套组件，以涵盖小程序的基础功能，便于开发者快速搭建出任何界面。同时也提供了自定义组件的能力，开发者可以自行扩展更多的组件，以实现代码复用。

### Exparser框架
Exparser的组件模型与WebComponents标准中的ShadowDOM高度相似。

### 内置组件
定义内置组件的原则： **没有这个组件的话，在小程序架构里无法实现或者实现不好某类功能**。

- `open-data`组件提供展示群名称、用户信息
- `button`组件里`open-type`属性

### 自定义组件

- 运行原理
- 组件间通信
   - `WXML`属性值传递&emsp;父到子
   - 事件系统&emsp;子到父
   - `selectComponent`&emsp;相当于`vue`的`$ref`
   - `relations`&emsp;类似`vue`的`provide`/`inject`

# 小程序核心语法
## 基本项目目录
- `pages`  页面目录
   - index  首页目录
      - index.js/json/wxml/wxss  首页逻辑、配置、模板、样式
- `app.js`  全局入口文件
- `app.json`   全局配置文件
- `app.wxss`   全局样式文件
- `project.config.json`   项目配置文件
- `sitemap.json`   微信索引配置文件

## 基本配置
- 全局配置
- 页面配置
- 索引地图配置

## 全局对象
- 不管是逻辑层还是试图层，微信都做了一个沙盒环境
   - 逻辑层没有`window`、`document`等浏览器对象
- 通过`wx`对象，提供一些移动端的能力及微信自身的能力
- `App Service`
   - `App()`  注册程序
   - `Page()`  注册页面
   - `getApp()`  获取 APP 实例
   - `getCurrentPages()`  获取当前页面栈
   - `API`  `wx.xxx()`
   - 模块化能力

## 常见API
- 路由
   - `wx.navigateTo` / `redirectTo`、`wx.switchTab` / `reLaunch`、`wx.navigateBack`  路由跳转
- 界面
   - `wx.showToast` / `showLoading` / `showModal`  显示消息提示、加载提示、模态窗
- 网络
   - `wx.request` / `downloadFile` / `uploadFile`  网络请求、文件下载、文件上传
- 数据缓存
   - `wx.setStorage` / `getStorage`   缓存数据存取
- 开放接口
   - `wx.login` / `authorize` / `getUserInfo`  登录、授权、获取用户信息
- WXML
   - `wx.createSelectorQuery`   获取节点信息

## 视图层
> - WXML (WeiXin Markup lauguage)：描述页面结构
> - WXSS (WeiXin Style Sheet)：描述页面样式
> - WXS (WeiXin Script)：小程序脚本语言

### WXML
- 数据绑定：`wxml` 动态数据来自 `Page` 中的 `data`
- 语法规则：`Mustache` 语法 `{{ }}`  为运算标记，内部为表达式
- 控制属性：`wx:if` / `wx:for` / `model:value`
- [模板](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html)
- [引用](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html)
   - `<import>` 引入目标文件的 `template` 模板
   - `<include>` 引入目标文件除 `template` 与 `wxs` 以外代码（相当于代码直接拷贝到该标签位置）

### WXSS
- 可使用绝大多数 CSS 特性
- 扩展
   - 尺寸单位 `rpx` (responsive pixel)
      - iPhone6 / 375px /750 物理像素  ——  1px = 2rpx
   - 样式导入  `@import`
      - @import “common.wxss”

### WXS
- 优点：一定程度上可以缓解跨线程通信的开销
   - 非纯 JS 语法、不支持 ES6
   - 不能调用其他 JS 文件函数、不能使用小程序 API
   - 不能作为自定义组件的事件回调
- 使用场景：过滤器、拖拽（频繁通信）

## 事件系统
- 事件：用户行为反馈到逻辑层处理
- 事件绑定 （与h5相比，不支持条件编程，如虚拟滚动的实现）
   - `bind:[eventName]`&emsp;&emsp;&emsp;&emsp;&emsp;冒泡事件
   - `capture-bind:[eventName]`&emsp;捕获事件
   - `catch:[eventName]`&emsp;&emsp;&emsp;&emsp;&emsp;冒泡事件（阻止事件继续冒泡）
   - `capture-catch:[eventName]`&emsp;捕获事件（阻止事件继续捕获、冒泡）
   - `mut-bind:[eventName]`&emsp;&emsp;&emsp;互斥事件
- 绑定数据
   - `data-[dataName]` 

## 基础组件
- 内置组件：`view`、`text`、`image`、`button`、`icon`、`web-view…`
- 原生组件（同层渲染技术）：`textarea`、`video`、`canvas`、`map`、`camera`、`live-player/pusher`、`input`
- 自定义组件

### 同层渲染原理
- 同层渲染：通过一定技术手段，使原生组件直接在`WebView`层渲染
   - iOS：基于 `WKWebView` 的原生组件 `WKChildScrollView`
      - 创建 `DOM` 节点并设置 `overflow: scroll`（内核创建 WKChildScrollView）
      - 微信端找到 DOM 节点对应的 `WKChildScrollView`
      - 将原生组件挂载到对应 `WKChildScrollView` 容器
   - Android：基于 `Chromium` 的 `WebPlugin` 插件机制
      - 创建 `<embed>` DOM 节点并指定组件类型（内核创建 `WebPlugin` 实例，生成 `RenderLayer`）
      - 将原生组件绘制到 `RenderLayer` 绑定的 `SurfaceTexture`
      - 通知 `Chromium` 渲染该 `RenderLayer`、渲染 `embed` 节点

# 性能优化
## 合理使用setData
- 只包括渲染相关的数据
- 控制`setData`频率  `nextTick`策略
- 差量更新  `this.setData({'obj.list.0.name':'差量更新'})`
- 避免在切后台后仍进行高频的 setData，例如倒计时更新

## 渲染性能优化
- 滚动相关推荐优先使用滚动驱动动画或者`wxs`
- 使用`IntersectionObserver`监听元素曝光
- 控制`WXML`数量和层级

## 页面切换优化
- 减少或避免在 `onHide`/`onUnload` 中执行耗时逻辑，如同步接口调用、`setData`等

## 资源加载优化
- 控制图片资源的大小
- 预先给定图片的尺寸 预渲染优化

## 内存优化
- 合理使用分包，  
- 按需注入，用时注入
- 垃圾回收方面 事件监听要移除、清理定时器

# 从web开发者角度去看小程序开发
## 对比小程序原生开发与h5原生开发
1. 文件名称三端到四段
2. 标签名称
   1. 精简了
   2. 新增一些与移动端的组件
   3. `cover-view` [可覆盖原生组件的视图容器](https://uniapp.dcloud.io/component/cover-view?id=cover-view) `cover-view`需要多强调几句，`uni-app`的非h5端的`video`、`map`、`canvas`、`textarea`是原生组件
3. js方面
   1. 都遵从`ecma`规范，标准`js`语法和`api`都支持 ，运行环境从浏览器变成`v8`引擎
   2. 然而浏览器下的JS，如`DOM`、`BOM`没有了
   3. 以前的**dom**操作，改成**MVVM**模式
   4. `js api` 发生变更 
      1. `alert`/`comfirm`  ==> `wx.showModel`
      2. `ajax` ==>  `wx.request`
      3. `cookie`/`session`没有了   用`localStorage`实现
4. css方面
   1. 通用选择器 没有了  `body` ==> `body`
   2. 单位 `rpx`
   3. 推荐使用`flex`
   4. css里背景图和字体文件 不能>40Kb 超过这个只要用base64或者外链
5. 工程结构和页面管理
   1. h5工程化开发者自由实现，
   2. 小程序通过配置app.json管理页面、分包、tabbar、导航相关配置，
   3. 组件也是在json文件中配置

## 对比小程序开发与vue开发
1. 生命周期   口述
2. 模版语法
   1. 小程序的数据绑定参考了vue，但自己修改了一些。在uni-app中只支持标准的vue，不支持小程序的数据绑定语法(bindinput解决)
   2. 数据绑定 列表渲染 显示和隐藏
3. 事件
   1. 写法
   2. 传值
4. 响应式
   1. 小程序里的`setData`在`uni-app`里并不存在，因为`vue`是自动双向数据绑定的。直接通过赋值方式修改数据，如果数据绑定到界面上，界面会自动更新渲染
      1. 取值`this.data.reason`
5. 组件通信
   1. 注册使用组件
   2. 父子组件通信  类似`vue`
      1. 子组件通知父组件 `triggerEvent`
      2. 父组件调用子组件 `$ref`
      3. 子组件样式 通过`props`传递或控制子组件样式  或者子组件类名前面加上父组件类名

## 对比uniapp开发与小程序开发异同点
1. 跨端开发 各端小程序、`h5`、`app`、快应用
2. 条件编译 开放包容
3. `uni-app`推荐使用`flex`布局，这个布局思路和传统流式布局有点区别。但`flex`的特色在于，不管是什么技术都支持这种排版，`web`、小程序/快应用、`weex`/`rn`、原生的`iOS`、`Android`开发，全都支持`flex`。它是通吃所有端的新一代布局方案。
4. 小程序的`app.json`被分成两段 `page.json`、`mainfest.json`
5. 原来的`app.js`和`app.wxss`被合并到了`app.vue`中

参考资料
[白话uni-app 【也是html、vue、小程序的区别】](https://ask.dcloud.net.cn/article/35657)
[vue和微信小程序的区别、比较](https://segmentfault.com/a/1190000015684864)

# 微信小程序开发调试相关问题
- 开发版 需要在微信小程序后台 添加为开发者才能进入，给开发着使用，能进行真机调试
- 体验版 需要在小程序后台添加为项目成员，主要给测试、产品人员使用，
   - 同一个小程序体验版二维码永远不会变，可从微信小程序助手进入
   - 如果当前体验版是A上传的，A再次上传，体验版自动更新，如果是B上传，则需要在小程序后台切一下体验版
- 生产版本， 对外开放，可以通过微信搜索找到
- 真机调试
   - 微信扫码真机调试， 会新开一个干净的容器（无网络缓存、授权信息、数据缓存等）
   - 关闭真机调试，微信会留下一个开发版
   - 真机调试的开发版与开发着工具中的版本是相互隔离的
- 开发版、体验版、生产版 共用同一个storage
- [VConsole](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/vConsole.html) 
   - 开发版或体验版 打开调试 重启小程序后会有一个VConsole 

1. 简述小程序双线程模型
2. 小程序与h5的区别
3. 原生小程序与其他框架对比
4. 小程序如何优化性能

参考资料：
- [微信小程序官网](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- 七冥老师的博客
- [uniapp官网的一些资料](https://uniapp.dcloud.io/resource.html)
- [匠心博客](https://zhaomenghuan.js.org/blog/wechat-miniprogram-principle-analysis.html)

微信小程序学习笔记

React源码学习

本文介绍不可变数据类型`ImmutableJS`和`ImmerJS`的基本用法，以及它们在React项目中的使用。



# 背景： 为什会有immutable?
> 在JavaScript中有引用类型和基本类型。
> - 如果 变量a是基本类型，将a赋值给变量b，再修改b的值，则变量a不受影响
> - 如果 变量a是引用类型，将a赋值给变量b， 则b与a是同一个对象的引用，若修改b对象的属性，a对象的该属性也会跟着变化。<br><br>
> 解决方案就是深拷贝，比如最简单的方式`JSON.parse(JSON.stringify(obj))`。
> - 但是深拷贝这种方式比较耗费性能（空间和时间），有没有折中的方案呢？ 即修改b的同时不影响a，且比深拷贝节省性能。
> - 所以有了immutable.js，简单说就是按需深拷贝。
> - 此外还有一个重要原因，开发中经常遇到函数带有副作用，副作用的函数修改了一个引用类型某个属性的值或者浅copy的问题，immutable为此类问题提供了一种优雅的解决方案。

# 什么是immutable?

- `Immutable Data` 就是一旦创建，就不能再被更改的数据
- 对 `Immutable` 对象的任何修改或添加删除操作都会返回一个新的 `Immutable` 对象；
- `Immutable` 实现的原理是 `Persistent Data Structure`（**持久化数据结构**）：**也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变**。同时为了避免 `deepCopy` 把所有节点都复制一遍带来的性能损耗，`Immutable` 使用了 `Structural Sharing`（**结构共享**），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

<img src='https://blog.warmplace.cn:11443/static/img/2b4c801a7b40eefcd4ee6767fb984fdf.a.gif' width=400>

# immutable.js
`immutable`是Javascript中不可变的集合<br />[官网](https://immutable-js.com/)

Facebook 工程师 `Lee Byron` 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 `Persistent Data Structure`，还有很多易用的数据类型。像 `Collection、List`、`Map`、`Set`、`Record`、`Seq`。有非常全面的`map`、`filter`、`groupBy`、`reduce`、`find`函数式操作方法。同时 `API` 也尽量与 `Object` 或 `Array` 类似。
```javascript
// 原来的写法
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b);  // 打印 2
console.log(foo === bar);  //  打印 true

// 使用 immutable.js 后
import Immutable from 'immutable';
var foo = Immutable.fromJS({a: {b: 1}});
var bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值，打印 1
// 等价于 foo.getIn(['a']).getIn(['b'])
console.log(foo === bar);  //  打印 false
```
# 快速入门API
笔者没有找关于immutable相关能够通俗易懂快速上手的中文文档，无奈只能自己阅读官方文档，以下内容是笔者基于官方文档整理的自己的总结
```javascript
// 前面提到为了消除引用类型及浅拷贝的副作用，引入了immutable概念
// 但是深拷贝这种方式比较耗费性能
// 因此寻找一种既能避免副作用又节省开销的方式--结构共享
// 没有immutable.js我们可能采用下面的方式避免副作用
var a = {b:'B',c:{d:1}};

var b = Object.assign({}, a);
b.b = 'new val bbb';

console.log(b.b)	// 'new val bbb'
console.log(a.b); // 仍旧为 'B'
console.log(a.c === b.c); // true

// 显然 7，8行代码书写起来不方面，
// 如果a.b也是引用类型，还对a.b 重复进行上述两部操作
```
然而 `immutable.js` 的使用有一定的上手成本，它自定义了一些数据结构
## Map类型
```javascript
// 如果是对象类型，在immutable中使用 Map
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: [1,2] });
// 修改原对象的属性会产生一个新对象， 原对象保持不变
const map2 = map1.set('b', 50); 

// 使用 .equals 方法比较
console.log(map1.equals(map2)); // false
// 取值 .get
console.log(map1.get('b'), map2.get('b')); // 2, 50
console.log(map1.get('c') === map2.get('c')); // true， c没有改变
```

## 不可变类型比较
引用类型的比较是基于引用地址，而不可变对象的比较是基于集合的值是否一一相同
```javascript
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = Map({ a: 1, b: 2, c: 3 });
map1.equals(map2); // true 
// Immutable.is(map1, map2); // true
map1 === map2; // false

const map3 = map2.set('b', 2);
map3 === map2; // true

// 如果一个对象是不可变的，
// 则可以简单地通过对它进行另一个引用而不是复制整个对象来“复制”它。
// 因为这可以节省内存并潜在地提高依赖副本的程序的执行速度（例如撤消堆栈）。
```
补充： 不可变对象的比较是基于值，算法复杂度$O(N)$, 而引用类型比较算法复杂度 $O(1)$ , 因此使用时要考虑性能权衡。

## JavaScript优先的API
Immutable.js 具有一个与 ES2015 Array、Map 和 Set 非常相似的面向对象的 API。

| JavaScript | immutable |
| --- | --- |
| Map | Map |
| Set | Set |
| Array | List |
| Object | fromJS or Map |

```javascript
const { Map, List } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3, d: 4 });
const map2 = Map({ c: 10, a: 20, t: 30 });
const obj = { d: 100, o: 200, g: 300 };
const map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }
const list1 = List([1, 2, 3]);
const list2 = List([4, 5, 6]);
const array = [7, 8, 9];
const list3 = list1.concat(list2, array);

// 从上面的示例可以看出 
// 1. 与JS API靠拢 如 Array.prototype.concat
// 2. api可以与JS对象互相操作


// 所有 Immutable.js 集合都是可迭代的
const { List } = require('immutable');
const aList = List([1, 2, 3]);
const anArray = [0, ...aList, 4, 5]; // [ 0, 1, 2, 3, 4, 5 ]
```
## 嵌套结构
```javascript
// 嵌套结构
const { fromJS } = require('immutable');
const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
console.log(typeof nested.toJS()); // 'object'


const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
// nested2  { a: { b: { c: [3, 4, 5] }, d: 6 } }

console.log(nested2.getIn(['a', 'b', 'd'])); // 6
console.log(nested2.getIn(['a']).getIn(['b', 'd'])); // 6

const nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
console.log(nested3);
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }

const nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }
```
## 批处理突变
默认情况下`immutable.js`中的`api`每执行一次就会返回一个新的`immutable`对象<br />
那么如果我只需要最后生成的`immutable`对象，中间的对象都不要，可不可以只返回新一个新对象呢？<br />
这就用到了 `withMutations` ，批量处理节省开销，目前只有少数方法 `set`、`push`、`pop` 可直接应用于持久化数据结构
```javascript
const { List } = require('immutable');
const list1 = List([1, 2, 3]);
const list2 = list1.withMutations(function (list) {
  list.push(4).push(5).push(6);
});
console.log(list1.size); // 3
console.log(list2.size); // 6
```

## 惰性序列
```javascript
const { Seq } = require('immutable');
const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  .filter(x => {
      console.log('filter', x)
    return x % 2 !== 0
  })
  .map(x => x * x);
// 因为oddSquares是一个immutable对象，是惰性执行的，上述代码不会做任何操作

// 当把immutable对象转换成 JavaScript 对象是 才会执行
console.log(oddSquares.toJS()); // 控制台打印了 ‘filter’


// Range 是一种特殊的 Lazy 序列。
const { Range } = require('immutable');
const a = Range(990, 1010)
//   .skip(100)
  .map(n => {
      console.log(n)
      return -n;
  })
  .reduce((r, n) => r * n, 1);

console.log('---', a) // --- 9.897178826145609e+59
```

## cursor
由于 Immutable 数据一般嵌套非常深，为了便于访问深层数据，Cursor 提供了可以直接访问这个深层数据的引用。
```javascript
import Immutable from 'immutable';
import Cursor from 'immutable/contrib/cursor';

let data = Immutable.fromJS({ a: { b: { c: 1 } } });
// 让 cursor 指向 { c: 1 }
let cursor = Cursor.from(data, ['a', 'b'], newData => {
  // 当 cursor 或其子 cursor 执行 update 时调用
  console.log(newData);
});

cursor.get('c'); // 1
cursor = cursor.update('c', x => x + 1);
cursor.get('c'); // 2
```
## 优点
1. 降低了mutable带来的复杂性
```javascript
function touchAndLog(touchFn) {
  let data = { key: 'value' };
  touchFn(data);
  console.log(data.key);
  // 因为不知道touchFn进行了什么操作，所以无法预料，但使用immutable，肯定是value
}
```

2. 节省内存
会尽量复用内存，甚至以前使用的对象也可以再次被复用。没有被引用的对象会被垃圾回收。
```javascript
import { Map} from 'immutable';
let a = Map({
  select: 'users',
  filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');

a === b; // false
a.get('filter') === b.get('filter'); // true
```

3. `Undo/Redo`，`Copy/Paste`<br />
因为每次数据都是不一样的，所有可以存储在数组里，想回退到哪里就拿出对应数据即可

## 缺点
1. 需要学习新的API
2. 容易与原生对象混淆
   1. 虽然 `Immutable.js` 尽量尝试把 `API` 设计的原生对象类似，有的时候还是很难区别到底是 `Immutable` 对象还是原生对象，容易混淆操作。
   2. `Immutable` 中的 `Map` 和 `List` 虽对应原生 `Object` 和 `Array`，但操作非常不同，比如你要用 `map.get('key')` 而不是 `map.key`，`array.get(0)` 而不是 `array[0]`。另外 `Immutable` 每次修改都会返回新对象，也很容易忘记赋值；
   3. 当使用外部库的时候，一般需要使用原生对象，也很容易忘记转换。

下面给出一些办法来避免类似问题发生：

1. 使用`TypeScript` 这类有静态类型检查的工具；
2. 约定变量命名规则：如所有 `Immutable` 类型对象以 `$$` 开头；
3. 使用 `Immutable.fromJS` 而不是 `Immutable.Map` 或 `Immutable.List` 来创建对象，这样可以避免 `Immutable` 和原生对象间的混用；

## 使用immutable.js优化react
1. React可以使用 `shouldComponentUpdate()`进行性能优化，但它默认返回 `true`，即始终会执行 `render()` 方法，然后做 `Virtual DOM` 比较，并得出是否需要做真实 `DOM` 更新；
2. 可以在`shouldComponentUpdate` 周期里执行`deepCopy` 和 `deepCompare` 避免无意义的`render`，但`deepFn`也很耗时；
```javascript
import { is } from 'immutable';
shouldComponentUpdate: (nextProps = {}, nextState = {}) => {
  const thisProps = this.props || {}, thisState = this.state || {};

  if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
    return true;
  }

  for (const key in nextProps) {
    if (!is(thisProps[key], nextProps[key])) {
      return true;
    }
  }

  for (const key in nextState) {
    if (thisState[key] !== nextState[key] && !is(thisState[key], nextState[key])) {
      return true;
    }
  }
  return false;
}
```

# immer
[官方文档](https://immerjs.github.io/immer/zh-CN/)

对于处理修改引用类型副作用问题，ImmutableJS 有两个较大的不足：
1. 需要使用者学习它的数据结构操作方式，没有 Immer 提供的使用原生对象的操作方式简单、易用；
2. 它的操作结果需要通过toJS方法才能得到原生对象，这使得在操作一个对象的时候，时刻要知道操作的是原生对象还是 ImmutableJS 的返回结果，稍不注意，就会产生问题；
```javascript
let currentState = {
    x:[2]
}
  
let o1 = currentState;
o1.a = 1;
  
let o2 = {
    ...currentState
};
o2.x.push(3); 
console.log(currentState) // { x: [ 2, 3 ], a: 1 }


/* 使用immer解决上述问题 */
import produce from 'immer';
let state = {
    x:[2]
}
let obj1 = produce(state, draft => {
  draft.a = 1;
});
let obj2 = produce(state, draft => {
    draft.x.push(3);
});
// { x: [ 2 ] }     { x: [ 2 ], a: 1 }      { x: [ 2, 3 ] }
console.log(state, obj1, obj2);

// produce方法做了哪些事情？
// 遍历原始对象，依次冻各个属性。
```
## 概念说明
`produce(currentState, recipe: (draftState) => void | draftState, ?PatchListener): nextState`

- `currentState`：被操作对象的最初状态
- `draftState`：根据 `currentState` 生成的草稿状态，它是 `currentState` 的代理，对 `draftState` 所做的任何修改都将被记录并用于生成 `nextState` 。在此过程中，`currentState` 将不受影响
- `nextState`：根据 `draftState` 生成的最终状态
- `produce`：用来生成 `nextState` 或 `producer` 的函数
- `producer`：通过 `produce` 生成，用来生产 `nextState` ，每次执行相同的操作
- `recipe`：用来操作 `draftState` 的函数

## 使用immer优化react
```javascript
// 原写法 setState
const { members } = this.state;
this.setState({
  members: [
    {
      ...members[0],
      age: members[0].age + 1,
    },
    ...members.slice(1),
  ]
})

// 现在写法 
const { members } = this.state;
this.setState(this.setState(produce(members, draft => {
  draft.members[0].age++;
})))
```
## reduce中使用immer
```javascript
// produce 内的 recipe 回调函数的第2个参数与obj对象是指向同一块内存
function reducer (state = {name: '章三', age: 12}, action) {
    return immer.produce(state, (draft) => {
        switch(action.type) {
            case 'ADD':
                draft.age++;
                return
            default: 
                return;
        }
    })
}

const store = Redux.createStore(reducer);
class App extends React.Component {
    componentDidMount() {
        store.subscribe(() => {
            this.forceUpdate();
        })
    }
    render() {
        const state = store.getState();
        return <div>
            <p>{state.name}今年{state.age}周岁</p>
            <button onClick={() => store.dispatch({type: 'ADD'})}>过生日</button>
        </div>
    }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
```
完整案例  [redux-immer.html](https://github.com/guojingwen/frontend-project/blob/main/react_study/6.immutable_immer/3.redux-immer.html)

React理念