图解 React

作者: 前端知识  发布:2019-11-08

响应式 UI

接收 jQuery 来更新 DOM 的话,你须要在方便的机遇以精确的依次来钦点要改过的因素。那等同给 Domo 一步步呈报头怎么摆、胳膊放在哪、腿什么姿态,等等,而且每张肖像都以那样。

图片 1

作者靠,那听上去太没味了,何况轻巧出错!为啥不直接报告 Domo 你想要的效能,并非当今如此一步步地告知她怎么摆 pose ?

图片 2

还有更酷的,想象一下只要得以在讲求进程中保存多少个占位符来表示同样姿势的不等变体。React 就会成功!

这种措施的话,当美术师供给 Domo 穿戴不用的罪名作画时,你无需每便都告知 Domo 戴哪顶帽子。你即便坐在大器晚成旁让她协调换帽子就可以。

图片 3

那项手艺就是 React 名字的由来。使用 React 营造的 UI 是响应式的。作为开荒者,你只需编写你想要的是什么,React 自个儿会弄精晓该怎么做。当数码变化时,UI 会相应地产生变动。你没有必要再关怀 DOM 的换代,React 会自动帮你完结。响应式 UI 的观点大大地简化了 UI 开荒。

自个儿精晓作者说过你无需其余编码知识,但只是为了支持您不错地对待难点,作者要么用代码把它写了出去。请查看上边包车型地铁亲自去做(尝试改变Domo 的罪名)):

Codepen 在线 Demo: Domo 的帽子 。

在后边的稿子中自己会来说学完整的代码,但当时您只需轻便看一眼关键代码就可以:

JavaScript

const ThinkerWithHat = ({ hat }) => ( <div> <Hat type={hat} /> <Thinker /> </div> );

1
2
3
4
5
6
const ThinkerWithHat = ({ hat }) => (
  <div>
    <Hat type={hat} />
    <Thinker />
  </div>
);

小心,你只需定义你想要的 (戴帽子的观念者),并“连接”上数据 (“type = {hat}”) 。当数码爆发变化时 (顾客选用生龙活虎顶帽子),UI 会自动更新。

上学指标

当您读完本文后愿意您能重复归来这里,并可以轻便出回应弹指间标题:

  • 怎样是 React Native ?为何它的名字中有 “Native” 字样?
  • 干什么 React Native 如此之酷?
  • 咱俩得以分别采纳 React Native 和 React 来支付什么?
  • 为啥会并发 ReactDOM ?它是做什么样的?
  • React 渲染器 ( renderer )是用来做哪些的?
  • React Sketch.app 专门的工作规律是怎么样?
  • ReactVENCORE 的行事原理是何等?
  • 何以是 ReactJS ?React.js 又是什么?

总结

好了。希望您能学会一些 React 的文化。本质上,它依旧三个工具,用来援助开垦者垄断(monopoly卡塔尔国 DOM ,进而营造出页面。响应式 UI 、虚构 DOM 和组件是 React 的三大基本概念,就是有了它们才使得 React 如此非常。当然,React 还大概有部分此外风趣的概念,比如单向数据流,我会在后头的文章中介绍。

在下大器晚成篇小说中,大家将介绍 ReactJS、React Native 和 React Sketch.app 之间的关联和差异。

自个儿鼓劲你回到【学习指标】这里,去尝试自个儿是否能够应对出全方位题目。就算您有别的难点或意见,请给自家留言!

1 赞 1 收藏 评论

图片 4

React Sketch.app、ReactVR、React XYZ…

Airbnb 近些日子揭露了意气风发款非常风趣的工具,叫做 React Sketch.app ,它能够将 React 代码转变到 Sketch 里的图层。你能猜出它的劳作规律吗?

对的!从本质上的话,它正是选择了独特渲染器的 React Native ,这么些渲染器能与 Sketch 中的树人实行调换!

图片 5

因为 React Sketch.app 是依靠 React Native 的,它也是三个完好无损的阳台,所以能够一贯运用它来从远程 API 来获取数据并在 Sketch 中开展渲染。

还要,许多 React Native 的此外变种纷纭问世,用来扶植在 Windows、 macOS、VR 等平台上创制应用。

那表示风流倜傥旦您调节了 React ,就足以在多量的阳台上利用 JavaScript 来创立应用,何况对新平台的支撑还在不断涌现。区别的阳台,相似的思辨方式。正如 React Native 的成立大家所倡导的: “上学叁遍,随处编写”。

关于 Web 你须要了然的

咱俩先来介绍部分你大概听过超级多年的术语。首先是 DOM 。

DOM

DOM 的全称是 Document Object Model (文书档案对象模型)。相当粗略吗?它便是文书档案对应的对象模型。

先近期忘记它的定义。大家先来探视盛名的 “Web Browser” 工作室!你能在底下的插画中找到 DOM 吗?

图片 6

难道说 DOM 是……意气风发棵树?对,就是生龙活虎棵树!奇异的是,计算机有关的众多东西其实都像是风姿浪漫棵树。

作者们来给 DOM 起个别名……就叫 Domo 怎么样?Domo 是 “Web Browser” 专门的学问室的御用模特,他的劳作便是在肖像书法大师(也可能是数百万个美学家)前面摆 pose 。

肖像正是在浏览器中浏览网址时所见到的源委。开垦者的职分就好比是监制,他来告诉 Domo 该穿什么衣服,摆什么 pose 。那将调控肖像最后画出来的标准。jQuery 和 React 都以库,开辟者使用它们作为与 Domo 调换的工具。

jQuery

jQuery 是叁个 JavaScript 库,它可以使开拓者操纵 DOM 变得简单得多。那他在 Domo 的轶闻中又扮演怎么着角色吗?

它是叁个工具,能够简化开拓者与 Domo 沟通的历程,就如风华正茂部无绳电话机。无论几时哪里都足以轻便呼叫 Domo 。相比于事先(使用原生 JavaScript),它要惠及得多,还记得在对讲机发明出来早先人跟人连轻易调换都要走得丰裕近才行。

图片 7

齐人有好猎者来讲,大家向来都在行使 jQuery 来直接与 Domo 沟通。是很便利,但决不未有毛病。

图解 React Native

2018/07/30 · JavaScript · React

最早的作品出处: Linton Ye   译文出处:郑丰彧   

图片 8

多如牛毛博客: 用通俗的语言和涂鸦来疏解 React 术语

  • 图解 React
  • 图解 React Native(本文)
  • 组件、Props 和 State (待翻译)
  • Props 和 State 浓烈掌握 (待翻译)
  • React Native vs. Cordova、PhoneGap、Ionic,等等 (待翻译)

在上风度翩翩篇作品中,我们介绍了哪些是 React 以致是哪些使得它如此特别。几近年来我们将介绍 React Native: 它是做什么的?它出自哪个地方?它和 React 有哪些分歧的地方?以致何为它如此令人振作振奋。

虚拟 DOM

jQuery 的另二个难题正是它的运作速度。

作为八个凶横的监制,你看不惯等待。你想要肖像画尽可能快地实现。不过,Domo 和乐师都超级慢,并不是是树濑这种慢,只是 Domo 要求时刻来换装和摆 pose ,何况音乐大师描绘也急需时日。

更不佳的是,在乐师完结大器晚成幅肖像画在此之前,你不能与 Domo 进行联系。事实上,你什么样也做不了,除了等待。真浪费时间!

图片 9

React 选用了另黄金时代项技巧来化解此主题材料。React 画草稿的快慢超快。是当您告知她你的要求后,他大约就能够马上将草稿达成并预备画下一张。以后就不要等待了!你能够不停地报告 React 你想的写真。React 将会纪录草稿的具有细节,并在妥贴的时候显得给 Domo 看。

图片 10

更主要的少数是 React 拾叁分聪明。他还恐怕会对负有草稿举办整治,拿掉重复的并保证 Domo 和音乐大师的专门的职业量维持在最低水平。

图片 11

这么些文稿就是 “虚构 DOM” 。虚构 DOM 要比垄断 DOM 快得多得多。开发者绝半数以上时日里实际都以在垄断(monopoly卡塔尔虚构 DOM ,并非平素调控真实的 DOM 。React 担负管理 DOM 的那有的脏活。

动手时刻!

说了那样多!你是还是不是想在融洽的手机上尝试生机勃勃番?

自己也很提神!拿起你的手提式有线电话机跟本身贰只动起来!

  1. 在三哥大上下载 Expo 应用。你能够点击这里下载: iOS、安卓,或者在 App Store 中搜索 “Expo” 。
  2. 在微电脑上开采网页: https://snack.expo.io/ 。
  3. 在大哥伦比亚大学上运营 Expo 应用并点击 “Scan QHighlander Code” 。
  4. 极目远望计算机上显得的二维码。假诺有的常规,你应当能够瞥见一条樱桃红的音讯“Device connected” 。
  5. 举个例子二维码无法自动消失的话,能够点击页面右上角的小叉关闭。关闭后应该能够瞥见代码编辑器。
  6. 删去编辑器中的全体代码,然后将此代码黏贴进去。
  7. 您在手机上旁观了什么?
  8. 你能够狂妄变动编辑器中的代码,然后立刻在手提式无线话机中查阅结果!

在后头的稿子中自己会对开拓条件实行详尽地演说。临时只需记住它正是 React Native 的 Codepen (在上篇小说中本人曾接收它来显示示例 Domo 的帽子)。

倘让你比较 React Native 版本 和 React (Web) 版本的话,你会意识代码十三分相近,皆以这么的:

JavaScript

const Hat = ... const Thinker = ... // 上面包车型大巴代码是 React Native 版本的 // Web 版本的话,只需将 “View” 替换来 “div” const ThinkerWithHat = ({hat}) => ( <View> <Thinker /> <Hat type={hat}/> </View> ); const HatSwitcher = ... ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Hat = ...
 
const Thinker = ...
 
// 下面的代码是 React Native 版本的
// Web 版本的话,只需将 “View” 替换成 “div”
const ThinkerWithHat = ({hat}) => (
  <View>
    <Thinker />
    <Hat type={hat}/>
  </View>
);
 
const HatSwitcher = ...
 
...

“学习一遍,随地编写”!还记得吗?

本文由金沙澳门官网发布于前端知识,转载请注明出处:图解 React

关键词: 金沙澳门官网