原创：有趣知识点摸索型文章
创作不易，请珍惜，之后会持续更新，不断完善
个人比较喜欢做笔记和写总结，毕竟好记性不如烂笔头哈哈，这些文章记录了我的IOS成长历程，希望能与大家一起进步
温馨提示：由于简书不支持目录跳转，大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容
目录
- 一、ReactNative
- 二、Weex
一、ReactNative
1、相关命令
从零入门ReactNative的建议
- 需要有
html、js、css等前端编程语言 - 然后，先去理解
React基本使用 - 搭建
ReactNative开发环境，选用iOS/Android先把项目运行起来。 - 学习
ReactNative基本开发流程。 - 写页面必须先搞懂
flex布局方式。 - 学习
ReactNative相关组件。 - 深入学习
ReactNative的原理等高级知识。 - 阅读源码，真正的搞懂它。
搭建环境
依赖Node环境
brew install node
node -v 查看node版本
sudo npm cache clean -f 清除缓存
sudo n stable 升级到稳定版本
sudo npm install -g n 按照node
安装watchman。是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作，例如执行一些命令等等。
brew install watchman
创建项目
npx react-native init xxx_name_xxx
启动。或者直接使用xcode启动工程编译调试。
yarn ios
创建的工程目录
- react-native 相关命令
react-native init MyAppName --version 0.64.0
react-native --version 查看版本
npx react-native info 命令查看当前的版本
- 工程入口代码文件
index.js，类似 iOS 中的main.m文件。 - App组件定义
App.js，当然也可以新建文件定义组件，类似 iOS 中的AppDelegate.m文件。 -
App.json RN模块的配置。其中name配置字符串，必须和RCTRootView初始化initWithBridge:moduleName:initialProperties:用到的moduleName一样。
{ "name": "HelloFirstRNDemo",
"displayName": "HelloFirstRNDemo"}
- iOS和Android两个文件夹是原生相关的工程。
-
package.json工程的配置文件，定义脚本命令、包依赖、测试等相关 - 相关依赖库
node_modules
2、开发基本流程
ReactNative 代码
1、在App.js中，导入RN相关的组件，其中包括系统组件与自定义组件的导入
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
Text,
useColorScheme,
View,
} from 'react-native';
2、在App.js中，自定义组件，即搭建页面。
class HelloWorld extends React.Component {
render() {
return (
<SafeAreaView>
<Text style={styles.title}> hello my world! </Text>
<ScrollView>
<Section> section 1</Section>
</SafeAreaView>
)
}
}
3、在App.js中，定义样式，推荐统一定义样式，RN使用布局方式为Flex布局。
const styles = StyleSheet.create({
title: {
fontSize: 42,
},
});
4、在index.js中，组件的注册。
import {AppRegistry} from 'react-native';
import {HelloWorld} from './App';
import {name as appName} from './app.json';
// 第一个参数：应用名称，第二个参数：组件名。
AppRegistry.registerComponent(appName, () => HelloWorld);
原生端（iOS为例）
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
// 其中self为实现RCTBridgeDelegate的实例，必须实现方法如下：
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
NSURL *url = nil;
#if DEBUG
url = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
return url;
}
初始化ReactNative代码的加载容器类RCTRootView。
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"FirstRNDemo"
initialProperties:nil];
二、Weex
1、概述
阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。
近一年来，ReactNative 和 Weex 这些跨平台技术对Native开发者来说，冲击是巨大的。Native在开发App的时候存在一些弊端，比如客户端需要频繁更新，iOS更新时间还要受到审核的牵制；iOS、Android和前端同时开发同一个需求，在人员成本上消耗大；Hybrid的性能和Native相比又差了一点。ReactNative 和 Weex的出现，就是为了解决这些痛点的。
Weex从出生那天起，仿佛就是和ReactNative是一对。ReactNative宣称“Learn once, write anywhere”，而Weex宣称“Write Once, Run Everywhere”。Weex从出生那天起，就被给予了一统三端的厚望。ReactNative可以支持iOS、Android，而Weex可以支持iOS、Android、HTML5。一统三端就解决了前言里面说的第二个痛点，同时开发浪费人员成本的问题。
Native移动开发者只需要在本地导入Weex的SDK，就可以通过HTML/CSS/JavaScript网页的这套编程语言来开发Native级别的Weex界面。这意味着可以直接用现有Web开发的编辑器和IDE的代码补全、提示、检查等功能。从而也给前端人员开发Native端，较低的开发成本和学习成本。
Weex是一种轻量级、可扩展、高性能框架。集成也很方便，可以直接在HTML5页面嵌入，也可嵌在原生UI中。由于和ReactNative一样，都会调用Native端的原生控件，所以在性能上比Hybrid高出一个层次。这就解决了前言里面所说的第三个痛点，性能问题。
Weex非常轻量，体积小巧，语法简单，方便接入和上手。ReactNative官方只允许将ReactNative基础js库和业务JS一起打成一个JS bundle，没有提供分包的功能，所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码，体积小很多，基础JS库包含在Weex SDK中，这一点Weex与Facebook的React Native和微软的Cordova相比，Weex更加轻量，体积小巧。把Weex生成的JS bundle轻松部署到服务器端，然后Push到客户端，或者客户端请求新的资源即可完成发布。如此快速的迭代就解决了前言里面说的第一个痛点，发布无法控制时间。
Weex中Native组件和API都可以横向扩展，业务方可去中心化横向灵活化定制组件和功能模块。并且还可以直接复用Web前端的工程化管理和监控性能等工具。
2、工作原理
上图是官方给的一张原理图，Weex是如何把JS打包成JS Bundle的原理本篇文章暂时不涉及。本篇文章会详细分析Weex是如何在Native端工作的。笔者把Native端的原理再次细分，如下图：
Weex可以通过自己设计的DSL，书写.we文件或者.vue文件来开发界面，整个页面书写分成了3段，template、style、script，借鉴了成熟的MVVM的思想。
Weex在性能方面，为了尽可能的提升客户端的性能，DSL的Transformer全部都放在了服务器端实现，Weex会在服务器端将XML + CSS + JavaScript 代码全部都转换成JS Bundle。服务器将JS Bundle部署到Server上和CDN上。
Weex和React Native不同的是，Weex把JS Framework内置在SDK里面，用来解析从服务器上下载的JS Bundle，这样也减少了每个JS Bundle的体积，不再有React Native需要分包的问题。客户端请求完JS Bundle以后，传给JS Framework，JS Framework解析完成以后会输出Json格式的Virtual DOM，客户端Native只需要专心负责 Virtual DOM 的解析和布局、UI 渲染。然而这一套解析，布局，渲染的逻辑SDK基本实现了。
最后Weex支持三端一致，服务器上的一份JS Bundle，通过解析，实现iOS/Android/HTML5 三端的一致性。
网友评论