快捷搜索:
来自 新京葡娱乐场网址 2019-12-13 21:16 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

图解 React

图解 React

2018/07/25 · JavaScript · React

原文出处: Linton Ye   译文出处:郑丰彧   

新京葡娱乐场网址 1

系列博客: 用通俗的语言和涂鸦来解释 React 术语

  • 图解 React (本文)
  • 图解 React Native
  • 组件、Props 和 State (待翻译)
  • 深入理解 Props 和 State (待翻译)
  • React Native vs. Cordova、PhoneGap、Ionic,等等 (待翻译)

React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

如果你是一名设计师,你所在的团队使用(或正在考虑使用)的技术是 React ,或者你只是单纯对 “React” 比较好奇的话,那么本文就是为你而准备的。

在文本中,我只使用朴实的语言和插图来解释 React 家族中的各种术语,并深入探索究竟是什么使得 React 如此特别。本文中并不需要任何代码知识便可阅读。我希望你先熟悉一些概念,从而不至于在后面的学习过程中感到绝望。如果后面需要温故而知新的话,欢迎随时回来阅读。

准备好了吗?我们开始了!

图解 React Native

2018/07/30 · JavaScript · React

原文出处: Linton Ye   译文出处:郑丰彧   

新京葡娱乐场网址 2

系列博客: 用通俗的语言和涂鸦来解释 React 术语

  • 图解 React
  • 图解 React Native(本文)
  • 组件、Props 和 State (待翻译)
  • Props 和 State 深入理解 (待翻译)
  • React Native vs. Cordova、PhoneGap、Ionic,等等 (待翻译)

在上一篇文章中,我们介绍了什么是 React 以及是什么使得它如此特别。今天我们将介绍 React Native: 它是做什么的?它出自何处?它和 React 有哪些不同之处?以及何为它如此令人振奋。

学习目标

读完本文后,希望你能够重新回到这里,并能够轻松回答下列问题:

  • 什么是 DOM ?
  • 什么是 React ?它的哪些方面比较适合应用开发?
  • React 与 jQuery 的不同之处?
  • React 的核心概念是什么?
  • 什么是响应式 UI ?
  • 组件有哪些好处?

学习目标

当你读完本文后希望你能重新回到这里,并能够轻松出回答一下问题:

  • 什么是 React Native ?为什么它的名字中有 “Native” 字样?
  • 为什么 React Native 如此之酷?
  • 我们可以分别使用 React Native 和 React 来开发什么?
  • 为什么会出现 ReactDOM ?它是做什么的?
  • React 渲染器 ( renderer )是用来做什么的?
  • React Sketch.app 工作原理是什么?
  • ReactVR 的工作原理是什么?
  • 什么是 ReactJS ?React.js 又是什么?

关于 Web 你需要了解的

我们先来介绍一些你可能听过很多年的术语。首先是 DOM 。

DOM

DOM 的全称是 Document Object Model (文档对象模型)。很简单吧?它就是文档对应的对象模型。

先暂时忘掉它的概念。我们先来看看大名鼎鼎的 “Web Browser” 工作室!你能在下面的插图中找到 DOM 吗?

新京葡娱乐场网址 3

难道 DOM 是……一棵树?对,就是一棵树!奇怪的是,计算机相关的很多东西其实都像是一棵树。

我们来给 DOM 起个昵称……就叫 Domo 如何?Domo 是 “Web Browser” 工作室的御用模特,他的工作就是在肖像画家(也可能是数百万个画家)面前摆 pose 。

肖像就是在浏览器中浏览网站时所看见的内容。开发者的职责就好比是导演,他来告诉 Domo 该穿什么衣服,摆什么 pose 。这将决定肖像最终画出来的样子。jQuery 和 React 都是库,开发者使用它们作为与 Domo 交流的工具。

jQuery

jQuery 是一个 JavaScript 库,它可以使开发者操纵 DOM 变得简单得多。那他在 Domo 的故事中又扮演什么角色呢?

它是一个工具,可以简化开发者与 Domo 沟通的过程,就像是一部手机。无论何时何地都可以轻松呼叫 Domo 。相比于之前(使用原生 JavaScript),它要方便得多,还记得在电话发明出来之前人跟人连简单交流都要走得足够近才行。

新京葡娱乐场网址 4

多年以来,我们一直都在使用 jQuery 来直接与 Domo 沟通。是很方便,但并非没有问题。

新京葡娱乐场网址 ,超越 Web

学完上一篇文章的你现在脑海中的画面应该是这样的:

新京葡娱乐场网址 5

你也知道,React 是在 Web 上开发用户界面的利器。使用 React 来开发 UI 的话,就能够描述你想要什么,而不是告诉 UI 如何更新 (响应式 UI),还可以在可重用组件中组织代码,并创建高性能用户界面而无需担心速度超慢的 DOM (虚拟 DOM)。越来越多的开发者选择 React 是因为它可以使得开发者更专注于上层业务,而不是底层 DOM 更新的细节。我们将这种开发 UI 的方式称之为 React 范式。范例基本上就是你思考一个问题的方式以及你如何描述它和它的解决方案。

对于 Web 应用来说这无疑很棒。那对于其他平台呢,比如 iOS 和 安卓?如果能将 React 范式应用于原生应用的开发,岂不是很棒?

在某种程度上来说,移动端的工作方式与 Web 端是相同的。比方说,有一个模特(树人),还有一个根据模特来创建视觉元素的艺术家。没什么可惊讶的,构建原生应用 UI 的传统方式就是直接操纵树人并告诉他如何更新(直接跟树人交谈)。这与在 Web 浏览器中直接操纵 DOM 有类似的缺点。React 绝对有助于解决此类问题。

除了相似之处外,移动端还有与 Web 端不同的地方,不同系统之间都是完全不同的。在过去,要开发原生应用的话,开发者需要学习特定的语言和平台工具链。

这有点像在国外的工作室上班,员工需要说不同的语言。你需要精通所有语言才能跟所有模特进行交流。这听上去就不简单,你说是吧?

新京葡娱乐场网址 6

所以,如果你想要开发出的原生应用运行在 iOS 和安卓两个平台上的话,你需要创建两套完全分离的代码库。同样的业务逻辑需要写两遍。开发应用既困难,成本又高,从长远来看的话维护更是如此。

这正是 React Native 诞生的原因。我们来一起看看它是如何将开发过程大大简化的。

React

下面请允许我来为你介绍一个全新的超级英雄: React 。

新京葡娱乐场网址 7

使用 React 的话,开发者不再需要直接跟 Domo 沟通。React 扮演在开发者和 Domo 之间的中间人角色。他降低了两者之间的沟通成本,同时简化了肖像创建的过程。

新京葡娱乐场网址 8

React 使用了一些技术来解决 jQuery 和其他工具中所存在的问题。下面是它的三项核心技术:

  • 响应式 UI
  • 虚拟 DOM
  • 组件

React Native

渲染器 ( renderer ) 和全新的 React

对于 Web 应用来说,React 负责启用 React 范式 (管理响应式 UI、组件和虚拟 DOM),以及实际更新浏览器中的 DOM (与 Domo 交流)。当 DOM 是唯一需要交互的对象时,React 可以轻松处理好着两项任务。

但是,对于原生应用的话,当需要管理不同平台上的各种树人时,事情就变得有挑战了。如果我们将更多的重任压在 React 肩上的话,那我们可怜的超级英雄将会为此抓狂。

新京葡娱乐场网址 9

为了解决此问题,React 创建者们将原来的 React 拆分成两部分。第一部分是全新的 React ,它只负责启用 React 范式。第二部分叫做 ReactDOM ,它唯一的任务就是与浏览器中的 DOM 进行交互。因为 ReactDOM 负责更新 DOM ,而 DOM 又决定了浏览器渲染的内容,所以我们将 ReactDOM 称之为渲染器。

想象一下,我们的超级英雄脱下了他的斗篷并在上面洒下了一些魔法之尘。

新京葡娱乐场网址 10

斗篷立刻就有了生命并成为超级英雄的小助手。从负责与 Domo 沟通的枷锁中释放后,React 现在可以专注于做他最擅长的事。

新京葡娱乐场网址 11

这种角色分离的概念非常之强大。现在只需要维护一个共享的核心库,同时编写全新的渲染器来适应新平台,这种方式要比之前简单多了。由于有了 iOS 和安卓渲染器的强力支撑,现在你可以使用一种语言和 React 范式来为两个平台开发应用。

React
只需要专注于他擅长的领域即可。渲染器来负责沟通。

一个完整的平台

React 的官网定义是: 用来开发用户界面的 JavaScript 库。它的含义有两层: 首先它是 UI 开发的利器,其次它不涉及任何其他领域。

实际上,你无法单独使用 React 开发出一个完整的应用。例如,你需要 CSS 来写样式,你需要 webpack 来打包,你需要 firebase 来做数据持久化,等等。

“Web Browser”
工作室的实际景象要你比之前所见到的忙碌得多。

这在 Web 开发环境下还好,因为 React 是一个 JavaScript 库,所以它能自然地适应 Web 环境下的其他部件。这些部件要么本身就是 JavaScript 库,要么能很容易地与 JavaScript 适配。毕竟 JavaScript 是 Web 上的标准语言。

但是,对于移动端来说就比较困难了,因为那里需要支持多种语言和技术。这个时候,我们就需要包含一整套部件,而且这些部件的使用方法要跟 React 类似,至少是能用 JavaScript 来调用。这样,React Native 诞生了。

相比于 Web 上的 React ,React Native 包括更多东西:

  • 全新的 React 作为核心库 (我们的超级英雄,只不过没穿斗篷)
  • iOS 和安卓的渲染器
  • 将代码转换成可安装应用的工具
  • 原生 UI 组件 (状态栏、列表等等)和动画
  • UI 的样式和布局工具箱 (flexbox)
  • 构建大多数应用的基础部分 (比如网络)
  • 提供原生功能的部分,比如粘贴板、加速计和存储

我们说 React Native 本身是一个完整的平台是因为它包含开发完整应用所需的一切。相比之下,原本的 React 只负责 Web UI ,你需要去自己引用其他部分才能创建出一个 Web 应用。

React Native
的组成

原生 UI

为什么 React Native 的名字里有 Native 字样?这实际上是它的标志特征: React Native 的内置 UI 是由原生 UI 组件组成的,这些组件表现良好,外观/感觉一致,并非 WebView 中所包含的一些垃圾模拟。用 React Native 开发的应用与用像 Swift 和 Java 开发的原生应用放在一起,通常是难以区分的。

你也知道,像滚动加速、动画、键盘行为和阴影这些小东西,实际上在应用的用户体验中扮演了非常重要的角色。如果这些不能与你手机中其他应用保持统一的话,那么用户很快就会觉得不爽。

我原本目的就是想在这里解释清楚 “native” 的真正含义以及为何 React Native 的性能更好。但我发现在几次头脑风暴之后,我的一整页笔记很快就写满了。还是在后面的文章中再来单独讲它吧。

暂时,我只需要你记住原生 UI 是让 React Native 大放异彩的原因之一。

看到这里,你应该了解 React Native 是一个完整的平台,它可以让你使用 JavaScript 来开发真正的原生应用,而且还是用 React 的路子来写(React 范式)。

新京葡娱乐场网址 12

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:图解 React

关键词: