美文网首页
02基础语法--001--RN工作原理

02基础语法--001--RN工作原理

作者: 修_远 | 来源:发表于2020-08-27 13:10 被阅读0次

[TOC]

初识 React Native

1.1 React Native的优点

  • React Native 则将你的代码解析成真正原生的 UI 组件,利用了所用平台上现有的视图渲染方式
  • React 不在 UI 主线程中运行,你的应用可以在不牺牲灵活性的前提下保持高性能
  • React Native 的生命周期与 React 相同,当属性(props)或状态(state)发生改变时,React Native 会重新渲染视图
  • 与浏览器上的 React 最大的不同在于,React Native 使用了宿主平台上的 UI 元素来代替 HTML 和 CSS
  • 对于开发者体验,查看修改结果时不需要重新编译,可以在Chrome 或者 Safari 的开发工具上调试
  • 代码复用与知识共享,React Native 不能做到100%跨平台,每个平台都有自己一些特性

1.2 风险和缺点

  • 由于 React Native 在项目中会引入额外的一层,因此带来了一些调试上的麻烦,尤其是在 React 和宿主平台进行交互时

React Native 工作原理

2.1 Virtual DOM(虚拟 DOM)与 React 桥接

Virtual DOM 诞生原因

  • 在 React 中,Virtual DOM 就像是一个中间层,介于开发者描述的视图与实际在页面上渲染的视图之间
  • 为了在浏览器上渲染出可交互的用户界面,开发者必须操作浏览器的文档对象模型(DOM,document object model)
  • 这个操作代价昂贵,对 DOM 的过度操作将会给性能带来严重的影响。React 维护了一个内存版本的 DOM,通过计算得出必要的最小操作并重新渲染
image.png

Virtual DOM 好处

  • Virtual DOM 确实能提升性能,但它主要的潜力在于提供了强大的抽象能力
  • 在开发者的代码与实际的渲染之间加入一个抽象层,这带来了很多可能性

React 桥接

image.png
  • React 可以渲染到多平台上
  • 桥接令这一切成为可能,它使得 React 可调用宿主平台开放的 UI 组件
  • React Native 目前同时支持了 iOS 和 Android 两种平台。由于 Virtual DOM 提供了抽象层,React Native 也可以支持其他平台,只需为其提供桥接即可

2.2 渲染周期

当 React 在 Web 环境中运行时,渲染周期始于 React 组件挂载之后

image.png

接着,React 进入渲染周期并根据需要渲染组件

image.png

2.3 在React Native中创建组件

  • 所有的 React 代码都存在于 React 组件中。
  • React Native 组件与 React 组件大体上一致,但在渲染和样式方面有一些重要的区别。

2.3.1 编写视图

  • 当编写 Web 环境的 React 时,视图最终需要渲染成普通的 HTML 元素(<div>、<p>、<span>、<a> 等)
  • 而在 React Native 中,所有的元素都将被平台特定的 React 组件所替换
  • 最基础的组件是能跨平台的 <View>,这是一个简单且灵活的 UI 元素
    • 类似于 <div> 标签
    • 在 iOS 中,<View> 组件被渲染成 UIView
    • 在 Android 平台上则被渲染成 View
image.png

其他组件则是平台特定的。例如,<DatePickerIOS> 组件

下面是从 RNTester 中摘录出来的代码

<DatePickerIOS
  date={this.state.date}
  mode="time"
/>
image.png

所有的 UI 元素均为 React 组件,而不是像 <div> 这样基础的 HTML 元素,因此我们在使用每一个组件之前,都需要显式地进行导入。例如,我们可以这样导入 <DatePickerIOS> 组件:

import { DatePickerIOS } from "react-native";

平台特定的元素和 API 在官方文档中有特殊的标签,通常使用平台名称作为后缀,例如
<TabBarIOS><ToolbarAndroid>

  • 如果你想复用代码,那么这些组件的抽象分离就至关重要
  • 如果一个组件封装的是关联逻辑,那就可以被复用
  • 如果你乐意的话,还可以为组件设计平台特定的版本,

2.3.2 使用JSX

  • 与 React 相一致,React Native 也是通过编写 JSX 来设计视图
  • 并将视图标记和控制逻辑组合在一起成为一个文件
  • JSX 认为减少心智负担比文件分离更有用

纯 JavaScript 编写 React 组件

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(
  React.createElement(HelloMessage, { name: "Bonnie" }), mountNode);

使用 JSX 使其更为简洁

class HelloMessage extends Component {
  render() {
      // 返回标记,而不是调用createElement方法
    return <div>Hello {this.props.name}</div>;
  }
}

// 我们不再需要调用createElement方法
ReactDOM.render(<HelloMessage name="Bonnie" />, mountNode);

以上两段代码最终都会在页面上被渲染为下面的 HTML:

<div>Hello Bonnie</div>

2.3.3 原生组件的样式

定义一个React样式

// 定义一个样式
const style = {
  backgroundColor: 'white',
  fontSize: '16px'
};

在React Native中使用它

// 然后使用它
const txt = (
  <Text style={style}>
    A styled Text
  </Text>);

2.4 宿主平台API

  • React 与 React Native 最大的不同,就在于宿主平台的 API
  • 在 React Native 中,平台特定的 API 在提供优秀原生的用户体验方面发挥了巨大的作用
  • 默认情况下,iOS 和 Android 版本的 React Native 支持许多常用的特性,甚至可以支持任何异步的本地 API
  • React Native 的桥接不可能暴露宿主平台全部的 API,如果你需要使用一个未支持的特性,完全可以自己动手添加到 React Native 中
  • 隔离和封装这些组件将会给你的应用带来更大的灵活性。当然,这对你开发 Web 应用同样奏效,如果你想共享 React 和 React Native 的代码,请记住像 DOM 这样的 API 在 React Native 中并不存在。

相关文章

  • 02基础语法--001--RN工作原理

    [TOC] 初识 React Native 1.1React Native的优点 React Native 则将你...

  • Go语言基础语法(import)-6

    章节 import 导包基础语法简介 import 导包原理 import 导包实践 1.import 基础语法简...

  • 2018-08-07(16)单元测试(下)

    Python基础语法(16) 单元测试 测试用例的核心工作原理 : test case(测试用例); test s...

  • day02 Python基础

    目录 01 Python基础 02 Python基础语法 03 变量 04 运算符 05 进制转换 01-heol...

  • Vue 基础-02-重点

    Vue 基础-day02-重点 01-基础-系统指令-v-bind-绑定 class-对象语法 :class="{...

  • 0.PHP面试都问什么

    PHP基础语法知识PHP底层原理常见的算法实现MysqlRedisHTTP原理fast-cgi常见的Linux命令...

  • js、jq、ajax、linux基础面试点

    js的基本语法延伸:js内置对象延伸:js HTML DOM对象延伸:jQ基础知识 Ajax的基本工作原理延伸:j...

  • 前端基础知识汇总

    基础知识主要包含以下几个方面: 基础:计算机原理、编译原理、数据结构、算法、设计模式、编程范式等基本知识了解 语法...

  • PHP基本语法

    PHP课程介绍PHP环境搭建IDE的安装PHP基础语法PHP的工作原理 深入浅出PHP PHP课程介绍:什么是ph...

  • 02基础语法--003--语法基础

    [TOC] JSX语法 React的核心机制之一就是可在内存中创建虚拟DOM元素,进而减少对实际DOM的操作从而提...

网友评论

      本文标题:02基础语法--001--RN工作原理

      本文链接:https://www.haomeiwen.com/subject/hcbzjktx.html