您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496netReactJs入门教程,实战教程

新葡亰496netReactJs入门教程,实战教程

发布时间:2019-12-12 08:01编辑:新葡亰官网浏览(85)

    图解 React

    2018/07/25 · JavaScript · React

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

    新葡亰496net 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   译文出处:郑丰彧   

    新葡亰496net 2

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

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

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

    ReactJS介绍

    React简介

    新葡亰496net,React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。查看github

    新葡亰496net 3

    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 又是什么?

    简介

    ReactJS是为了解决构建随着时间数据不断变化的大规模应用程序而设计的用来构建用户界面的JavaScript库是MVC中的V(视图)

    对ReactJS的认识及ReactJS的优点

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    关于 Web 你需要了解的

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

    DOM

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

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

    新葡亰496net 4

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

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

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

    jQuery

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

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

    新葡亰496net 5

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

    超越 Web

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

    新葡亰496net 6

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

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

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

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

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

    新葡亰496net 7

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

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

    React设计思想

    React设计思想很独特,属于革命性创新,性能独特,代码逻辑却非常简单。很有可能会成为将来Web开发的主流工具。这个项目本身也越来越大,从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。其衍生出来的React Native项目,希望用Web APP的方式去native app,从而实现同一组人只需写一次UI,就能同时运行在服务器,浏览器和手机。随着在2015年发布了Android版本,把web和原声平台的js开发技术扩展到了Android平台,以后很有可能出现同一组人只需要写一次UI,就能运行在三端(service,mobile,browser)

    React两个主要思想:简单,表达能力

    1、ReactJS的背景和原理

    Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化。在Web开发中,我们需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    由此我们可以看出,React的神奇之处就在于它的Virtual DOM 及 Diff算法,基于Virtual DOM,我们几乎可以忽略性能问题儿无所顾忌地刷新页面,虚拟DOM机制能确保只会对页面上真正有变化的部分进行实际的DOM操作,而不会像传统的html一样修改整个DOM树。关于React的Diff算法,一张图片可以简单的解释:

    新葡亰496net 8

    diff算法

    React组件会有key属性,在虚拟DOM里React会对比相同Key的组件,对有更新的组件进行变更。我们可以查看Diff算法示例。也就是说,与传统HTML开发不同,react只需要关注数据的整体变化而不需要数据变化产生的UI变化,对DOM的修改只需要交给框架,这样就大大降低了逻辑的复杂度,降低了开发难度。

    一、ReactJS简介

    React

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

    新葡亰496net 9

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

    新葡亰496net 10

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

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

    React Native

    渲染器 ( renderer ) 和全新的 React

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

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

    新葡亰496net 11

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

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

    新葡亰496net 12

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

    新葡亰496net 13

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

    新葡亰496net 14

    简单

    仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新

    2、组件化

    react的另一个特点就是组件化,把每一个UI单元封装成组建的形式,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。组件化的思考方式不同于MVC的表现、控制、模型分离,React更关注的是View层,它将View层的UI按功能分成不同的组件,每个组件都是独立的。
    react组件有以下特点:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(MAINTAINABLE):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    拥有这些特点,所以ReactUI组件间的耦合性非常低。

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    响应式 UI

    使用 jQuery 来更新 DOM 的话,你需要在适当的时机以正确的顺序来指定要更改的元素。这等同于给 Domo 一步步讲述头怎么摆、胳膊放在哪、腿什么姿势,等等,并且每张肖像都是如此。

    新葡亰496net 15

    我靠,这听起来太乏味了,并且容易出错!为什么不直接告诉 Domo 你想要的效果,而不是现在这样一步步地告诉他怎么摆 pose ?

    新葡亰496net 16

    还有更酷的,想象一下如果可以在要求过程中保留一个占位符来表示相同姿势的不同变体。React 就能做到!

    这种方式的话,当画家要求 Domo 穿戴不用的帽子作画时,你不需要每次都告诉 Domo 戴哪顶帽子。你尽管坐在一旁让他自己换帽子即可。

    新葡亰496net 17

    这项技术正是 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 Sketch.app、ReactVR、React XYZ…

    Airbnb 最近发布了一款十分有趣的工具,叫做 React Sketch.app ,它可以将 React 代码转换成 Sketch 里的图层。你能猜出它的工作原理吗?

    没错!从本质上来说,它就是使用了特殊渲染器的 React Native ,这个渲染器能与 Sketch 中的树人进行交流!

    新葡亰496net 18

    因为 React Sketch.app 是基于 React Native 的,它也是一个完整的平台,所以可以直接使用它来从远程 API 来获取数据并在 Sketch 中进行渲染。

    与此同时,许多 React Native 的其他变种纷纷问世,用来支持在 Windows、 macOS、VR 等平台上创建应用。

    这意味着只要你掌握了 React ,就可以在大量的平台上使用 JavaScript 来创建应用,而且对新平台的支持还在不断涌现。不同的平台,同样的思维模式。正如 React Native 的创建者们所倡导的: “学习一次,随处编写”。

    表达能力

    当数据变化了,React 概念上是类似点击了更新的按钮,但仅会更新变化的部分。

    hello world && React前奏

    React的使用环境非常简单,只需要下载ReactJs,解压后得到js文件,引入我们的html就ok。

    新葡亰496net 19

    Hello World

    上图就是一个最简单的React实例,在浏览器页面输出'Hello,world!'字样;

    上面的代码除了引进react库外,还有一些是需要注意的:

    • 最后一个<seript>的标签的type属性为text/babel。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" ,当然,React并不要求一定要用jsx语法,也可以直接使用js编写。

    • 引进的三个库必须是首先加载的,其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。通过react-tools的jsx --watch src/ build/命令即可把JSX语法转换为原生js。

    //jsx语法
    ReactDOM.render(
    
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    
    //转换后的js语法
    ReactDOM.render(
    
        React.createElement("h1", null, "Hello, world!"),
        document.getElementById('example')
      );
    

    ReactJS官网地址:

    虚拟 DOM

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

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

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

    新葡亰496net 20

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

    新葡亰496net 21

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

    新葡亰496net 22

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

    动手时刻!

    说了这么多!你是否想在自己的手机上尝试一番?

    我也很兴奋!拿起你的手机跟我一起动起来!

    1. 在手机上下载 Expo 应用。你可以点击这里下载: iOS、安卓,或者在 App Store 中搜索 “Expo” 。
    2. 在电脑上打开网页: https://snack.expo.io/ 。
    3. 在手机上启动 Expo 应用并点击 “Scan QR 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 = ...
     
    ...

    “学习一次,随处编写”!还记得吗?

    注意事项:

    1. React 不是一个完整的MVC框架,最多可以认为是MVC中View;
    2. React的服务器端Render能力只能算是一个锦上添花的功能,不是其核心出发点
    3. React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。
    开始编写React:

    相当于main()函数的ReactDOM.render方法:

    ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    Github地址:

    组件

    React 中第三项技术就是组件的概念。

    组件应该很容易理解,因为我们所生活的现实世界就是由组件组成的。我们的车、房,甚至是身体都是由不同的组件所组合而成的。这些组件又是由一些更小的组件组合而成,以此类推,直至分解成原子。

    如果你熟悉 Sketch (译者注: 著名的设计软件,与 PhotoShop 齐名) 的话,组件与 Sketch 中的 symbols 十分类似。构建 React 应用几乎都是在同组件打交道: 寻找最适合的组件、融合两个组件、在现有组件的基础上创建新组件,等等。

    回到 “Web Browser” 工作室,你将肖像的需求描述成一个个组件,React 将这些组件翻译成 Domo 所能理解的内容。这将为你节省大量时间,因为你无需再一次次地重复描述需求中的通用部分。

    新葡亰496net 23

    组件另外很酷的一点是如果你改变了某个组件,那么所有使用此组件的地方都将自动更新。

    新葡亰496net 24

    什么是 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特性与原理

    JSX语法

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。简单的说,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析,React 可以用来做简单的 JSX 句法转换。它能定义简洁且我们熟知的包含属性的树状结构语法。

    jsx里既可以包含HTML标签也可以包含React组建,区别在于,渲染 HTML 标签,要在 JSX 里使用小写字母开头的标签名,渲染React组建,需要大写字母开头的本地变量;

    新葡亰496net 25

    JSX

    由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。
    作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。
    

    JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。

    var Nav;
    // 输入 (JSX):
    var app = <Nav color="blue" />;
    // 输出 (JS):
    var app = React.createElement(Nav, {color:"blue"});
    

    二、对ReactJS的认识及ReactJS的优点

    总结

    好了。希望你能学会一些 React 的知识。本质上,它还是一个工具,用来帮助开发者操纵 DOM ,从而构建出页面。响应式 UI 、虚拟 DOM 和组件是 React 的三大核心概念,正是有了它们才使得 React 如此特别。当然,React 还有一些其他有趣的概念,比如单向数据流,我会在后面的文章中介绍。

    在下一篇文章中,我们将介绍 ReactJS、React Native 和 React Sketch.app 之间的关联和区别。

    我鼓励你回到【学习目标】那里,去试试自己是否能够回答出全部问题。如果你有任何问题或意见,请给我留言!

    1 赞 1 收藏 评论

    新葡亰496net 26

    总结

    好了,到目前为止,我们已经介绍了不少内容。我们了解了一些 React 的历史以及 React Native 的组成。作为一个完整的平台,React Native 包含开发原生应用所需的一切,并且它使用的是 JavaScript 语言和 React 范式。React Native 现在支持多个平台,其中包括 iOS、Android、Windows、macOS、Sketch.app ,甚至还有 VR 。“学习一次,随处编写”!

    在下篇文章中,我们将介绍什么是真正的原生应用,以及为何 React Native 是开发原生应用的最佳方式之一。

    我鼓励你回到学习目标那里,去试试自己是否能够回答出全部问题。如果你有任何问题或意见,请给我留言!

    1 赞 1 收藏 评论

    新葡亰496net 27

    特性

    1. 采用单向数据流,易追踪数据
    2. 将HTML,JS结合起来构建组件,组件状态和结果意义对应起来,实现模块化开发
    3. 创建了高性能的虚拟DOM,避免直接操作DOM。即组件不是真实的DOM节点,而是存在于内存中的一种数据结构。所有的DOM变动都先在虚拟DOM上发生,然后再将实际发生变动的部分反映在真实DOM上。(DOM diff算法

    ReactJS组件

    ####### 组建属性
    既然ReactJS是基于组件化的开发,所以React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    第一个组件:

    新葡亰496net 28

    组件案例

    这段代码里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    ####### 组建状态
    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    新葡亰496net 29

    状态

    上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
    由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

    ####### 组件的生命周期
    新葡亰496netReactJs入门教程,实战教程。组件的生命周期分成三个状态:

    Mounting:已插入真实 DOM
    Updating:正在被重新渲染
    Unmounting:已移出真实 DOM
    

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    componentWillMount()
    componentDidMount()
    componentWillUpdate(object nextProps, object nextState)
    componentDidUpdate(object prevProps, object prevState)
    componentWillUnmount()
    

    此外,React 还提供两种特殊状态的处理函数。

    componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
    shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
    

    新葡亰496net 30

    组件生命周期

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    另外,组件的style属性的设置方式也值得注意,不能写成

    style="opacity:{this.state.opacity};"

    而要写成

    style={{opacity: this.state.opacity}}

    这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

    ####### 组件的嵌套
    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    新葡亰496net 31

    组件嵌套

    新葡亰496net 32

    响应结果

    首先,对于React,有一些认识误区,这里先总结一下:

    原理

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    旧模式问题

    Web开发中总需要将变化的数据实时反映到UI上,就需要对DOM进行操作。旧模式下频繁or复杂的DOM操作通常是性能瓶颈产生的原因===>>如何高性能地进行复杂DOM操作也成为衡量一个Web前端开发人员的重要指标。,React则是直接改造了,在浏览器端用JavaScript实现了一套DOM AP,引入了一套虚拟DOM的机制。

    1、ReactJS的背景和原理

    虚拟DOM(react 精髓)

    虚拟DOM的精髓所在有两点:性能和抽象

    1. 通过js对象模拟原生DOM(js对象性能比DOM性能高),再加上DOM diff算法,极大地提升了DOM操作的性能。

      所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新;

      React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。

      每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。


    1. 虚拟DOM最大的意义是对DOM进行了一层抽象,而且这个抽象在我们使用React时,感觉不是特别明显,毕竟我们再js中写的标签跟原生的没有什么区别,并且最终都被渲染成了DOM对象。这也恰恰说明react抽象了DOM的具体实现。在浏览器中,虚拟DOM最终编译成了DOM;在IOS中虚拟DOM完全可以编译成oc中的组件,在Android中完全可以编译成Android对应的UI组件。

      新葡亰496net 33

      这里写图片描述

    1. JS业务逻辑代码完全可以借助Node移植到任意平台上
    2. 虚拟DOM在不同平台上的抽象有不同实现,不能完全移植,但是用法基本一致
    3. 最底层的UI调用我们就不用关心了

    以上这些也是React Native的实现,这是一次学习,到处编写的体验

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    JSX语法

    JSX 语法就是:HTML 语言直接写在 JavaScript 语言之中,不加任何引号,它允许 HTML 与 JavaScript 的混写

    注意:在使用webstorm的时候,js要做下修改才不会报错,setting里的language 里的js要选成 JSX Harmony

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    语法规则

    遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析,允许在模板中插入变量:

        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
    

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    ReactJS组件

    React 都是关于构建可复用的组件。事实上,通过 React 唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离,更加简单。====》》》这也就引出了组件化开发

    2、组件化

    基本组件例子

    React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>demo4</title>
        <script type="text/javascript" src="../build/react.js"></script>
        <script type="text/javascript" src="../build/react-dom.js"></script>
        <script type="text/javascript" src="../build/browser.min.js"></script>
    </head>
    <body>
     <div id="example"></div>
    
     <script type="text/babel">
        //组件类的第一个字母需要大写,否则会报错
        var HelloMessage = React.createClass({
            //所有组件必须有自己的render方法,用于输入组件
            render : function(){
            return <div><h1>I am {this.props.name}</h1><h2>My age is:{this.props.age}</h2></div>;
            }
        });
    
        ReactDOM.render(
            <HelloMessage name="sqliang" age="23"/>,
            document.getElementById('example')
        );
     </script>
    </body>
    </html>
    

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    组件化

    React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。MVC让我们实现了表现,数据,控制的分离,开发中从技术的角度对UI进行了拆分;React启发开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装

    新葡亰496net 34

    这里写图片描述

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    组件的特征:

    1. 可组合,一个组件可以和其它组件一起使用,或者嵌套在另一个组件内部
    2. 可重用,每个组件都有独立功能,可被使用在多个UI场景
    3. 可维护,每个小的组件只包含自身的逻辑,更容易被理解和维护

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    React学习

    真正学会React是一个漫长的过程,因为它不仅仅是一个库,一个框架,而是一个庞大的体系,想要学习它,发挥它的威力,整个技术栈都要配合它来改造,需要学习一整套解决方案,从后端到前端,都是全新的模式。使用React后,就会发现采用它的整个技术栈是合理的选择

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    新葡亰496net 35

     

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    新葡亰496net 36

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    新葡亰496net 37

    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。

     

    到这里,恭喜,你已经步入了ReactJS的大门下面,让我们来进一步学习ReactJs吧

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    新葡亰496net 38

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    新葡亰496net 39

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    新葡亰496net 40

    显示结果如下:

    新葡亰496net 41

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的"真功夫"了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

    前面说了,ReactJS是基于组件化的开发,下面我们开始来学习ReactJS里面的组件,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello name的值,代码如下:

    新葡亰496net 42

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    新葡亰496net 43

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    新葡亰496net 44

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM

    • Updating:正在被重新渲染

    • Unmounting:已移出真实 DOM

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    • componentWillMount()

    • componentDidMount()

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

    • componentWillUnmount()

    此外,React 还提供两种特殊状态的处理函数。

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    下面来看一个例子:

    新葡亰496net 45

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    新葡亰496net 46

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    七、参考资料

    React中文文档 

    React入门实例教程

    颠覆式前端UI开发框架:React

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496netReactJs入门教程,实战教程

    关键词: