React 和 Cordova的异同及应用

#前端开发技术的调研

标签(空格分隔): 未分类



标签: 移动开发
2018.1.6


文章目录

    • React.js
      • 概述
        • JSX
        • Virtual DOM
    • React Native
      • React Native 印象
      • React Native工作原理
    • Weex和Vue.js
    • React Native、Weex和Cordova对比
      • 跨平台特性
      • 开发方式
    • 应用
      • 现在支付APP
      • 支付插件
      • web

名词 链接 描述
Cordova http://cordova.apache.org/ Hybrid App中间件
ios-deploy https://github.com/phonegap/ios-deploy 使用命令行部署iOS项目
PhoneGap https://phonegap.com/ 使用Web快速开发、打包Hybrid APP
Node.js https://nodejs.org/en/ 基于 Chrome V8 引擎的 JavaScript 运行环境。
npm https://www.npmjs.com/ Node.js的包管理器
Git https://git-scm.com/ 分布式版本控制库
ionic http://ionicframework.com/ 基于Angular的H5框架
Angular https://angularjs.org/ 优秀的前端JS框架
Weex https://angularjs.org/ 一个使用 Web 开发体验来开发高性能原生应用的框架
Vue.js https://vuejs.org/ 一套用于构建用户界面的渐进式框架
Rax https://alibaba.github.io/rax/ 一个通用的跨容器的渲染引擎
React.js https://reactjs.org/ 构建用户界面的JavaScript库
Flex (Flexible Box) https://www.w3.org/TR/css-flexbox-1/ 简便、完整、响应式地实现各种页面布局方案
PhoneGap100 http://www.phonegap100.com/ Hybrid App社区

本文旨在了解React Native 、Weex和 Cordova 的差异,评估几种种前端技术实现的优缺点。关于Cordova我们在之前有过介绍,本篇再简单介绍ReactNative和Weex。

React.js

概述

React.js 不是一个框架,它只是一个库。它只提供 UI(view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router等来协助提供完整的解决方法。
类似的还有 Vue.js

在web开发中,Facebook认为现有的MVC框架无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的MVC正在土崩瓦解。所以认为MVC不适合大规模应用,当系统中有很多的模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图间可能存在的双向数据流动。
于是Facebook推出了Flux 和React.js。
其官方表述:

We built React to solve one problem: building large applications with
data that changes over time.(构建那些数据会随时间改变的大型应用)

  • React不是一个MVC框架
  • React不使用模板
  • 响应式更新非常简单
  • HTML5仅仅是个开始

React的目的是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你不再需要来回查找某个 DOM 元素,然后再操作 DOM 去更改UI,变成你只需要操作数据就会改变相应的dom。

所以 React 的核心思想是:封装组件。
各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。

一个简单的例子:

import React, { Component } from 'React';
import { render } from 'React-dom';

class HelloMessage extends Component {
  render() {
    return 
Hello {this.props.name}
; } } // 加载组件到 DOM 元素 mountNode render(, mountNode);

####组件

React 应用都是构建在组件之上。
上面的 HelloMessage 就是一个 React 构建的组件,最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面,显示的内容就是

Hello John

props 是组件包含的两个核心概念之一,另一个是 state,一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

props
props 就是组件的配置属性,由外部通过 JSX 属性传入设置,一旦初始设置完成,就可以认为 this.props 是不可更改的,只是在调用这个组件的时候传入不同的属性(比如这里的 name)来定制显示这个组件。所以不要轻易更改设置 this.props 里面的值(虽然对于一个 JS 对象你可以做任何事)。

state
state 是组件的当前状态,可以把组件简单看成一个“状态机”,根据状态 state 呈现不同的 UI 展示。
一旦状态(数据)更改,组件就会自动调用 render 重新渲染 UI,这个更改的动作会通过 this.setState 方法来触发。

更多关于组件

JSX

从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面,这个就是 React 提出的一种叫 JSX 的语法,这应该是最开始接触 React 最不能接受的设定之一,因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分,能够将 HTML 封装起来才是组件的完全体,前端才能实现真正意义上的组件化。

为什么会有JSX
传统的 MVC 是将模板放在其他地方,比如

你可能感兴趣的:(iOS,开发)