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

[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 中并不存在。