动画的技术选型：实现简单 可控

CSS 实现起来比较复杂

JS js和元素沟通成本比较高 协议 性能不是很好

GIF 不可控 循环或者暂停可能做不到

VIDEO 搞成mp4格式 视频的格式 控制播放或者暂停

WEBP 网页可控 在微信小程序不可控

LOTTIE 在微信小程序比较可控

SVG 只支持在image标签渲染出来

Lottie：找个动画资源 json文件

设计师在软件里面把动画做好，ae软件里面导出来再引入进来

在taro里面封装Lottie

Lottie只支持支付宝小程序不支持微信小程序

现在的目标是封装完一份可以在微信小程序中使用的Lottie组件

封装成基础库的坑点：

1.怎么获取到这个节点 要支持ref属性

react里面有个hook useimperativehandle可以把ref传出去 通过forwardref 把ref抛出去

2.到底传什么动画资源进来 要不要循环 要不要暂停

3.经常拿不到node，传的id不能是运算出来的id，就可以正常拿到节点，如果是运算出来的id，就可能拿不到

4.找json资源，有的图片资源包含了一些代码

iconfont矢量图标库

eval（）可以执行一些字符串脚本

小程序禁用eval（）（估计是出于性能考虑）

5.在react机制中，需要使在合适的时机重新执行它，因为第一次取到的初始值是空，

真实的引用：lottie.loadAnimation 把整个引用传出去

json资源很小的

nanoid小的工具库用来生成唯一的id 有个api在小程序里面用不了

uuid 也可以生成唯一的id 算的太复杂了 导致node有的拿不到有的时候可以获取到

把id从外部传进来，内部不用管id的事 可以很稳定的获取到节点

useload页面初次渲染完成的回调

useready 页面加载完成时的回调

useeffect组件级别

不能用小程序生命周期，只能用useeffect组件级的生命周期方法

只要有组件级别的销毁的话就用useeffect

因为生命周期执行完就没了

总结：组件不能用小程序的生命周期

ts的小细节：类型自动推导

核心理念：学会使用类型自动推导 返回值的类型确定