React Native 入门及其与Android&Flutter的类比

** 前言

 - 核心描述什么是React Native的组件(一下简称RN)、如何创建一个组件， 组件的生命周期以及对应的方法，什么是props、如何用props进行数据传递、检查，什么是state，什么是ref，什么是类，UI界面布局属性等。

 - 类比Android原生和Flutter中的属性。

 - 如有描述不准确的地方欢迎批评指正。

 

** 什么是React Native组件

Android：类似Android原生里面View的概念

Flutter: 类似Widget概念

RN: UI布局的核心部分，定义了自身及自身内部的在UI上的呈现方式，位置以及样式等属性。

 

** 如何创建RN一个组件

Android：继承View及其子类

Flutter: 继承StatefulWidget/StatelessWidget（有状态和无状态两种）及其子类

RN：继承react包下面的Component及其子类，这种方式带引用this，带状态state,也可以使用export function的方式导出无状态的组件。

 

** 组件的生命周期（各个阶段常用到的核心方法，并不代表全部完整方法）

Android：onCreate、onStart/onReStart、onResume、onPause、onStop、onDestory等等

Flutter：初始化constructor->initState->didChangeDependences->build/交互更新didUpdateWidget->build/移除deactivite->dispose

RN：初始化constructor|getDefaultProps|getInitialState->componentWillMount->render->componentDidMount/交互更新componentWillUpdate->componentDidUpdate/移除componentWillUnmount

 

** 如何用props传递数据并检查数据类型

Android: Java强类型语言限制基本类型，Class对象通过instanceOf校验、@声明+枚举限定参数属性及范围

Flutter: 参考dart语言

RN: 通过prop-types包下的PropTypes校验,例如Class.propTypes= {name: PropTypes.string}

 

** 什么是status

Android：View的重新绘制，粗略类似

Flutter：有相同的概念

RN：与Props类比，props不可以主动被改变重父类继承而来，state可以改变自身触发重新render的机制，而且state属于每个组件私有。

 

** 什么是ref

Android：类似View的Tag属性

Flutter：待尝试

RN：因为RN运用了虚拟DOM树的概念，通过ref可以获得DOM树中对应的真是节点，拿到该节点的信息可以作相应的操作处理

 

** ES6 类的概念

Android：Java类的概念类似，大部分使用的是继承操作

Flutter：dart的类继承

RN：继承父类的属性，实现子类的特有属性

 

** UI布局属性

Android：类似width、height、orientation、widget、gravity、margin、padding的概念

Flutter：复用了Google的MaterialDesign和IOS Component那一套UI属性。

RN：width、height、flexDirection、flex、 alignItems、justifyContent详情参考：https://reactnative.cn/docs/flexbox/