作者:solart

版权声明:本文为博主原创,转载请注明出处。

React Native 的学习和开发有半年多的时间,在这个时间上我觉得可以粗浅的阐述下我理解的 React Native 是怎样的一种技术栈以及我对它的一些看法。

1、DOM 与 JavaScript

简单来说, DOM (Document Object Model) 是操作HTML/XML文档的一组接口,大家熟知的 Web 交互,就是由 JavaScript 操作 DOM 完成的。

1
2
3
4
<div>
<h2>Title</h2>
<p>This is a paragraph</p>
</div>

1.1 DOM 的缺陷

  • 直接操作 DOM 的接口不方便
  • 需要大量的兼容性代码(针对不同的浏览器平台或版本)
  • 性能较差

早期的 Web 页面用户体验比较差,这与 DOM 本身的缺陷有着一定的关系。在 Web 开发中,我们总需要将变化的数据实时反应到 UI 上,这时就需要对 DOM 进行操作,除了操作不便和需要大量的兼容代码外,频繁或复杂的 DOM 操作通常也是性能瓶颈产生的原因,直到以 JQuery 为代表的第三方框诞生才解决了大多数的开发痛点,但依然达不到桌面级的开发体验。

1.2 JavaScript 的成长

众所周知,由于 JavaScript 设计阶段过于仓促(据说设计者 Brendan Eich 仅仅用了十天),设计并不完善,甚至有人总结了 JavaScript 的 10 个设计缺陷,而这些缺陷本身并没有扼住它的发展,随着 ES 5ES 6 的相继发布 JavaScript 被越来越多的开发者认可。除了作为 Web 端开发的不二选择,还被拓展到后端开发 Node.js,2016 年甚至被称为大前端元年。

2、前端框架 React

随着基于 HTML 的前端界面开发变得越来越复杂,为了解决这一问题,Facebook 推出的 React 框架应运而生。

2.1 React 特点

  • 虚拟 DOM —— 减少真实 DOM 操作 (提升性能)
  • 组件化 —— 封装 HTML 片段和事件处理 (易于重用,可维护性强)
  • 封装事件 —— 将原始浏览器事件转换为 React 事件 (处理兼容性)
  • 数据绑定 —— 监听属性和状态自动更新页面 (提升开发体验)
  • 全屏更新 —— 渲染整个页面,但只更新需要变化的部分 (提升性能及开发体验)

以上这些特点是 React 吸引前端开发人员的主要因素,也是它的设计理念,现在你可以看到 React 的社区是多么活跃。

2.2 React 组件和虚拟 DOM

jsx2html

驱动 React 高效性能的虚拟 DOM 技术作用的最基础单元是 React 中被称为组件(Component)的东西。

3、React Native

React 跨平台的潜力逐渐被发掘,于是诞生了 React Native。其实从 React 拓展出来的框架还有像 react-native-web (基于 React Native 的组件及 API 拓展到了 Web 端)以及适配 Windows 一些项目等。

3.1 React Native 与 React

react_native_born

React Native 基于 React 生态,对 Native 平台进行抽象,构建全新的跨平台开发体验。由于是基于 React ,所以在此它们存在一些共性的地方:

  • 共性
    • 组件模型
    • 组件生命周期
    • 虚拟 DOM 及相关算法

另外,它们分别针对 Native 和 Web 所以存在一些本质上的差异:

  • 差异
    • 页面渲染
    • 事件处理

3.2 Componet 的哲学

在上面我们提到了组件 ,组件的功能简单来说,就是布局界面,响应交互。父组件单向传递 props 给子组件,控制子组件的显示,组件不能修改自身的 props 。父组件可以访问子组件,子组件不能访问父组件。

react_componets

使用组件来封装界面模块,整个界面就是一个大组件,开发过程就是不断优化和拆分界面组件、构造整个组件树的过程。

3.2 Redux

有一种观点说很可能你并不需要 Redux,但实际的线上项目大都需要 Redux 帮助处理状态管理。事实上,大多数情况,你非常需要它。

Redux 整个应用只能有一个 Store,非常方便数据跨层传递,单向数据流架构设计,非常方便状态回朔。

redux

被吐槽最多的就是随着应用越来越大,使用 Redux 你需要写非常多的 Action 和 Reducer,这部分其实可以通过约定数据格式避免掉去写这些鸡肋的函数,事实上你可以用通用函数来代替他们。面对通常的单页面应用,可以通过设计唯一的 SceneKey 隔离数据。

Redux 和 React 是没有必然关系的,Redux 用于管理 state,与具体的 View 框架无关。使用 React / React Native 可以使用 react-redux 来绑定 React。

3.3 JSX 和样式

JSX 语法,像是在 JavaScript 代码里直接写 XML 的语法,实质上这只是一个语法糖。且目前 WebStorm 等 IDE 对 JSX 支持非常完善。

通过 JSX 和 css 来实现原生 UI 的布局样式,简直是一个天才的想法,极大的简化了原生开发的复杂度。

1
2
3
4
5
6
render () {
let { text } = this.props
return (<View>
<Text>{text}</Text>
</View>)

}

3.4 双刃剑

说起来 React Native 组件化的开发方式易于复用,有着非常快速的开发体验,React 社区也非常成熟等。不可否认也存在一些问题,比如目前版本不够稳定,目前看距离稳定版还有很远的路要走,尤其在 Android 端;另外性能相对原生较差等。我目前对它的评价是:不会成为开发主流,但亦会在社区力量下快速成长,前途呢,未卜。

但如果你作为原生开发人员要从 React Native 入门前端也是一个十分不错的选择,由于相同的技术栈,学会React Native 基本免费赠送 React。Learn once, write anywhere.