俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

图解 React

什么是 ReactJS ?什么是 React.js ?

你可能无数次地听到 ReactJS (或 React.js) ,我也是这么叫的。实际上这并非官方名称。自从诞生之日起,官方名称一直都是 “React” ,从未改过。

因为一般 JavaScript 库的名字都趋向于叫 “XyzJS” 或 “Xyz.js” ,React 也不例外,或许开发者们都已经习惯给库的名称加上 “JS” 或 “.js” 的后缀了。因为 React 最开始是作为 Web 库的身份出现的,所以很多开发者都习惯于实用 ReactJS 或 React.js 来泛指 Web 上的 React ,即 React 和 ReactDOM 的集合。

按照惯例,当我提到 ReactJS 时,其实我想表达的也是 Web 上的 React 。

图解 React

2018/07/25 · JavaScript · React

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

图片 1

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

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

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

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

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

图解 React Native

2018/07/30 · JavaScript · React

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

图片 2

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

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

学习目标

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

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

React Native

渲染器 ( renderer ) 和全新的 React

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

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

图片 3

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

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

图片 4

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

图片 5

这种角色分离的概念非常之强大。现在只需要维护一个共享的核心库,同时编写全新的渲染器来适应新平台,这种方式要比之前简单多了。由于有了 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 范式)。

图片 6

虚拟 DOM

jQuery 的另一个问题就是它的运行速度。

作为一个严苛的导演,你讨厌等待。你想要肖像画尽可能快地完成。但是,Domo 和画家都比较慢,并非是树濑那种慢,只是 Domo 需要时间来换装和摆 pose ,并且画家作画也需要时间。

更糟糕的是,在画家完成一幅肖像画之前,你无法与 Domo 进行沟通。事实上,你什么也做不了,除了等待。真浪费时间!

图片 7

React 采用了另一项技术来解决此问题。React 画草稿的速度超级快。是当你告诉他你的要求后,他几乎就能立即将草稿完成并准备画下一张。现在就无需等待了!你可以不停地告诉 React 你想的肖像。React 将会纪录草稿的所有细节,并在适当的时候展示给 Domo 看。

图片 8

更重要的一点是 React 十分聪明。他还会对所有草稿进行整理,拿掉重复的并确保 Domo 和画家的工作量维持在最低水平。

图片 9

这些草稿就是 “虚拟 DOM” 。虚拟 DOM 要比操纵 DOM 快得多得多。开发者绝大部分时间里其实都是在操纵虚拟 DOM ,而不是直接操纵真实的 DOM 。React 负责管理 DOM 的这部分脏活。

学习目标

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

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

React

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

图片 10

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

图片 11

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

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

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:图解 React

您可能还会对下面的文章感兴趣: