React-Native 入门指北

发表于 分类于

概要：

  1. React Native 发展历程
  2. 我们为什么用 React Native
  3. React Native 组件分析
  4. React Native 基础

一、React Native 发展历程

什么是 React ？

简单讲一下， React 起源于 Facebook 内部项目，Facebook 调研了市场所有 js 框架，发现一个能打的都木有，就决定自己撸一套，用来架设 Instagram 的网站。做出来以后，发现，诶，不错哟，就在2013年5月开源了

  • React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源
  • React 是一个用于构建用户界面的 JS 库
  • React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

以上是 github start 数量，光看这个数量，可能觉得和 vue 相差不大。当然，这只是一个维度

咱们再来看 npm 近两年的下载量，react 几乎是碾压对手

Native App(原生应用)

  • 优点：功能强大，性能优越，能最大程度的压榨硬件
  • 缺点：研发成本高，周期长，版本维护困难

React Native 起源

  • 为了不受苹果掌控，Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发。虽然有些成果，但始终离 Native App 有差距，而且这个差距可能永远赶不上

  • 2012年9月，Facebook 方面承认『Betting on HTML5 was a mistake』。便放弃移动 HTML5，全力转型原生 App 开发

  • 在转型原生 App 开发后，Facebook 内部其实还在研发一种新的移动技术，并开始使用这种技术开发内部 App。这个技术便是 React Native

  • 2015年3月，Facebook 正式开源 React Native，虽然当时开发平台仅支持 Mac 系统，部署也仅支持 iOS 平台

  • 2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性

React、React.js、React Native三者的联系

  • React 是基础框架,提供了一套基础设计实现理念
  • React.js 是在 React 理念的指导下产生的专门用来开发网页的 web 前端框架。与 React 同时出现和发展，React 的相关概念都在 React.js 文档中
  • React Native 是用来开发移动端 app 的。也是用了 React.js 那套模式，只是底层是对原生代码的封装及调用
  1. React：不同平台上编写基于 React 的代码，“Learn once, write anywhere”
  2. Virtual DOM：相对 Browser 环境下的 DOM（文档对象模型）而言，Virtual DOM 是 DOM 在内存中的一种轻量级表达方式（原话是 lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的 UI，JS 和Native 之间通过 Bridge 通信

二、为什么用 React Native，优势？

  • 性能
  • 开发效率
  • 热部署
  • 大厂、生态

性能媲美原生应用：由于 React Native 提供的组件是对原生 API 的暴露。虽然我们是用 js 写的代码，但实际上调用的是原生 API，原生的 UI 组件。体验上足以媲美原生应用

开发效率高：相比于原生开发，js 学习成本低。更重要的是，React 核心是组件化开发，通用性高、可移植性高。上一个项目的某些组件，可以很方便地拿来在下一个项目中使用

三、React Native 组件分析

基础组件：View，Image，Text，TextInput，FlatList，ScrollView

有平台特征的组件：RefreshControl

Button

Switch

Picker

下拉刷新

四、React Native 基础

JSX

JS X是 HTML 和 JavaScript 混写的语法，当遇到 <，JSX 就当 HTML 解析，遇到 { 就当 JavaScript 解析

JSX 语法 转换为 JS：

1
2
3
4
5
6
7
8
9
// 使用JSX
React.render(
    <ul class="list">
        <li>fist li</li>
        <li>second li</li>
        <li>third li</li>
    </ul>,
    document.getElementById('example')
)
1
2
3
4
5
6
7
8
9
//  未使用JSX
React.render(
    React.createElement('ul', { className: 'list' },
        React.createElement('li', null, 'fist li'),
        React.createElement('li', null, 'second li'),
        React.createElement('li', null, 'third li')
    ),
    document.getElementById('example')
)

可以看出在React中直接使用纯javascript或者使用JSX都是可以的，只是使用JSX会使搭建 React 应用更加简单，代码可读性更好

props 和 state

最简单的理解，一个组件的渲染函数就是一个基于 state 和 props 的纯函数，state 是自己的，props 是外面来的，任何东西变了就重新渲染一遍，是不是很简单？

组件生命周期

几个常用的组件生命周期函数

  • componentWillMount()
  • componentDidMount()
  • componentWillUnmount()
  • componentWillReceiveProps(object nextProps)
  • shouldComponentUpdate(object nextProps, object nextState)

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

总结

现阶段最佳选择，但并非完美无瑕

  • 性能并非媲美原生，尤其是执行动画的时候
  • iOS 和 Android 并非完全通用，还是要在代码内做一些判断
  • 实际开发的时候，还是需要了解底层原理，自己开发跟原生桥接的组件，这个对前端来说是一个很大的挑战
  • RN因为CSS样式的布局, 虽然写的方便了, 但是view的层级明显多了, RN本身以及增加的view层级也带来了内存的消耗