ReactNative进阶(九):API学习之注册组件AppRegistry,阿里架构师经验分享

86 阅读3分钟

文章目录


一、前言

在前期博文《ReactNative进阶(三):ReactNative 项目启动原理介绍》讲解了RN启动过程及原理,今天主要讲解下RN项目启动运行接口AppRegistry

二、AppRegistry 简介

每一个应用程序的运行都需要有一个入口文件或者入口函数,而在React Native 中,AppRegistryRN应用的入口函数。

AppRegistry负责注册运行React Native应用程序的JaveScript入口,程序入口组件使用AppRegistry.registerComponent来注册。当注册完应用程序组件后,Native系统(OC)就会加载jsbundle文件并触发AppRegistry.runApplication运行应用。AppRegistry接口有以下方法:

  • registerConfig(config:Array): 静态方法,注册配置;

  • registerComponent(appKey:string,getComponentFunc: ComponentProvider): 注册入口组件;

  • registerRunnable(appKey:string , func :Function): 注册函数监听;

  • getAppKeys(): 获取registerRunnable注册的监听键;

  • runApplication(appKey:string,appParameter:any): 运行App;

首先解释下AppRegistryJS运行所有React Native应用的入口, 那么什么是入口?

1.在我们初始化一个react native项目的时候,默认的index.ios.js/index.android.js文件内容是如下:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
 
class Allen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 
});
 
AppRegistry.registerComponent('Allen', () => Allen);

下面是我在学习HTMLCSS的时候整理的一些笔记,有兴趣的可以看下:

![HTMLCSS部分截图](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/58785b1dbab148df88c1691a8f76c485~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616797&x-signature=2q4yDLibjjEaIyAeRGM5i5URiOA%3D)

### 进阶阶段



进阶阶段,开始攻 JS,对于刚接触 JS 的初学者,确实比学习 HTMLCSS 有难度,但是只要肯下功夫,这部分对于你来说,也不是什么大问题。

JS 内容涉及到的知识点较多,看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学,我是不建议的,毕竟刚接触 JS 谁能看得下去,当时我也不能,也没那样做。



我这部分的学习技巧是,增加次数,减少单次看的内容。就是说,第一遍学习 JS 走马观花的看,看个大概,去找视频以及网站学习,不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子,开始动手敲代码,一定要去实践、实践、实践,这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点,眼高手低可不是个好习惯,我在这吃过亏,你懂的。



**1JavaScriptES6**



在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e3907082dfe0474ba9da7a51aa6a3fc0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616797&x-signature=kmjCl5OnO8aZH3oZgddfU8a6VXc%3D)



**2、前端框架**

前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,AngularReactVue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。



以 Vue 为例,我整理了如下的面试题。



![Vue部分截图](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c93377259ccf42c1bd0e35e4996d55a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616797&x-signature=e0Lg2mYjYML6YT2iebJSLyYCkv0%3D)


**开源分享:https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**