本文的理解需要对TS泛型的基础运用有一定了解，可参考TS泛型

以该对象为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const person = {
    name: 'tony',
    age: 31,
    father: {
    	name: 'jack',
    	age: 55
    },
    assets: [
        'house',
        {
            name: 'money',
            num: 100000
        }
    ]
};

person对象有多种形式的变量

1. 具有纯量变量，name，age，
2. 还有对象变量比如father，
3. 数组变量，assets

泛型是组件化的基础，它可以帮助设计可复用的函数或者类型，进而帮助设计可复用的组件。

Hermes 是专门针对 React Native 应用而优化的全新开源 JavaScript 引擎，使用Hermes有如下优点

1. 优化启动时间
2. 减少内存占用
3. 减少空间占用

现如今，公司项目的初步升级工作已经完成，本文将以公司项目为测试项目，对比JSC（旧有JavaScript引擎）跟Hermes引擎的性能表现

上篇提到一个不完美的滚轮动画方案，详情见React-Native 纯ts代码实现滚轮选择器 —— 滚轮动画逻辑（二），其问题主要是复杂函数的补间动画难以实现，直接的动画计算又只支持基础运算，本篇将使用React-Native-Reanimated 动画框架来解决这个问题。

滚轮的动画效果涉及到高中数学的知识，主要为三角函数，指数函数，所以本章开头会先对这两类函数做简单的介绍，之后再讲滚轮动画的原理，最后为代码实现。

iOS的滚轮选择器兼顾了实用性跟美观，在例如日期选择，国家省份选择的用户场景下，尤为适合，在create-react-native-library搭建RN库中我们介绍了如何使用create-react-native-library创建一个标准RN库，以这个例子为契机，包括创建，环境初始化，设计，到发布代码到npm，依次实践整个流程。

Node选择v20.12.2

本文调研所有0.70以上的React Native版本

下文中标绿的点表示比较有用的功能点，标红表示需要需要注意的点

0.70 - 发布于2022.09.05

主要更新点：

• 统一Codegen的配置

  将安卓 build.gradle中的配置移动到package.json

• 默认hermes系统

• 安卓全面支持CMake

• 升级 metro 0.72.0 支持新的jsx代码转换

• 重点提升新框架的体验

总结：

70版本主要重点在于提升新框架的用户体验，对于旧架构，简化了安卓端的配置

0.71 - 发布于2023.01.12

RN提供了两套动画系统

• Animated API
• LayoutAnimation

他们分别有不同的应用场景。本文DEMO可以从QDAnimatedDemo 获取

基础动画

Animated API 主要是用来将视图的属性值映射成动画值，然后通过控制该动画值的变化关系来赋予视图定制化的动画效果，比如正方块从顶部往下掉，

类组件

类组件中定义了几组常用的生命周期的hook，分别为这几个函数打log来查看它们的调用时机

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class ClassComponent extends React.Component {

    componentDidMount(): void {
        console.log('class component did mount')
    }

    componentWillUnmount(): void {
        console.log('class component will unmount')
    }

    componentDidUpdate(prevProps: Readonly<ModelProps>, prevState: Readonly<{}>, snapshot?: any): void {
        console.log('class component did update')
    }    
  
    render(): React.ReactNode {
        console.log('class component render')
        return (
            <View style={styles.container}>
                <Text style={styles.title}>{`Class Component` }</Text>
            </View>
        )
    }
}