前端和JavaScript是一个奇怪的世界. 每天推出的新事物的数量经常被不与他们合作的人嘲笑, 很多都是这样. 仍然, 有时, 我们对新信息有点不知所措, 库, 和讨论, 我们想要稳定的东西, 像是船只的避风港,我们可以在那里多待一会儿. 到目前为止,反应似乎是动态JavaScript发展海洋中的一个温顺的港湾.
考虑到这一点, 我们决定制作这个由多个部分组成的反应教程, 来展示它的功能,并看看它与角和VueJS的比较.
< / div >
当然, 反应并不是我们可以使用的唯一的港湾, 但是目前, 这是最受欢迎的一种, 稳定的, 创新的解决方案, 虽然它仍然有很多升级, 它们更多的是一种改进的选择,而不是功能的必需品.
2019年反应的状态
反应 视图库可以追溯到2011年吗, 当它的第一个原型, 叫FaxJs, 出现在其Facebook页面上, 反应本身是由Jordan walker(他也是上述原型的作者之一)在5月29日的JSConfUS上介绍的, 2013, 并于7月2日在GitHub上公开发布, 2013.
反应在2014年继续流行, 当会议开始出现以扩大社区并普及反应时. 但从我的角度来看,2015年对于react大公司来说是具有里程碑意义的一年.g.(Airbnb和Netflix)开始喜欢和收养 反应的解决方案. 同时, 反应本地 是那年出现的. 反应本地背后的想法并不是什么全新的东西, 但看起来很有趣, 尤其是因为它得到了Facebook的支持.
另一个重大变化是 回来的一个Flux实现. 这使得国家管理方式更加平易近人和容易, 这是迄今为止最成功的实现.
从那时到现在,很多其他的东西变得可用,包括 反应的工具比如核心算法重写、光纤、语义版本控制的改变等等. 快进到今天,我们第16次.6.3, 可能在带有Hooks的新版本可用之前几周(它应该是16个).7.0,但是由于反应的一些修复,这个版本已经发布了.懒). 反应是众所周知的,稳定的,并且得到了很好的意见.
但是 Is 反应?
好吧, 如果你是前端开发人员,你还没有听说过它, 那我得说恭喜你了, 因为这是一项壮举.
不开玩笑了,反应是一个声明式的基于组件的视图库,可以帮助你构建UI. 它是一个库,而不是一个框架,尽管一开始,许多人将其描述为后者.
显然,如果我们要加入回来的, 反应的路由器, 等等......, 它开始拥有制作常规单页应用程序所需的所有东西, 这可能是为什么它有时被错误地描述为框架而不是库的原因. 如果有什么区别的话, 可以这样说, 将该环境的所有组件结合在一起, “框架”这个词有点合适, 但就其本身而言, 反应只是一个库.
让我们停止讨论术语,关注反应中的不同之处, 在它开始之前我们没有的东西. 首先,当你第一次想到反应时,你会想 JSX,因为它是您查看代码时首先看到的东西. JSX是一种JavaScript语法扩展,有点类似于HTML/XML. 当涉及到反应和JSX时,我们与HTML有一些不同.g., 反应中的类是 类名称
,没有表,但是 tabIndex
,该样式接受具有camelcase属性的JavaScript对象,等等.
有一些小的区别,但任何人都应该及时发现它们. 事件处理是通过的,e.g., onChange
和 onClick
属性,可用于附加某些函数以处理事件. 同时, 以后可以通过使用道具自由地重用和定制组件, 因此,没有理由多次编写相同的代码.
从' 反应 '中导入反应, {组件};
导出默认类App扩展组件{
呈现(){
回报(
Hello World, {这.道具.名字}
);
}
}
然而,在反应中,JSX实际上并不是绝对必要的. 您可以编写常规函数来创建元素,而无需使用JSX. 上面的代码可以像下面一样使用.
从' 反应 '中导入反应, {组件};
导出默认类App扩展组件{
呈现(){
返回反应.createElement (
“div”,
空,
“你好世界”,
这.道具.名字
);
}
}
很明显, 我并不是建议您使用这种语法, 尽管在某些情况下它可能会派上用场.g.(你想引入一个非常小的东西,不想改变构建环境).
实际上,我展示上面的代码片段还有另外一个原因. 通常,开发人员不理解为什么我们需要做以下事情:
从“反应”中导入反应;
代码片段应该是不言自明的. 尽管我们正在提取 组件
,我们仍然需要反应,因为Babel会在JSX上面编译到下面 反应.createElement
. 所以,如果我们不导入反应,它就会失败. 我提到了巴别塔, 它是一种工具,可以帮助我们引入JavaScript中(或浏览器中)之外的东西,或者是JavaScript的扩展(或其他语言,如TypeScript), Babel支持Babel 7). 感谢巴别塔:
- JSX将被制作成浏览器可以理解的函数.
- 我们可以使用浏览器中还没有的新功能(例如.g.,类属性).
- 我们可以在保持对旧浏览器的支持的同时,添加新浏览器中有但旧浏览器中没有的功能.
简而言之, tomorrow is today in JavaScript; 这 is probably something that would require its own article. 值得一提的是,反应的导入也可以被其他一些技术绕过(比如通过Webpack引入ProvidePlugin等等)。, 但是由于这里的空间有限, 我们将避免它,并假设用户将使用Create 反应 App (CRA)(稍后会提到更多关于这个工具的信息)。.
第二件重要的事, 而且比JSX本身重要得多, 反应是基于虚拟DOM吗. 简而言之, 虚拟DOM是由开发人员编写的JavaScript表示的理想树的内存, 稍后与真正的DOM进行比较,并在一个称为调和的过程中与之同步.
反应与角和Vue相比有什么不同?
我很不喜欢比较图书馆,尤其是当我们被迫拿梨和苹果作比较的时候。库和. 框架 等等).
因此,我将尝试比较反应 角 和 Vue 使用一系列简短的问题和答案,这些问题和答案与技术无关,而不是像这样说 “X比Y好,因为它使用JSX而不是模板.” 诸如此类的观点通常是个人的偏好,一个人的主观选择. 还有速度,内存分配等.反应和它的主要竞争对手(我想到了角和Vue)都非常相似。. 确实有 这件事的报道很好, 但请记住这一点:绝大多数应用程序看起来并不像真正的大表,在10k表中交换行. 因此,这些结果也是纯粹的速度实验. 在现实世界中,你一开始就不会这么做.
< / div >
所以让我们来看看有关反应的一些问题,以及它与竞争对手的比较:
我想有很多工作机会. 反应有多流行??
这个问题很容易回答——选择反应. 实际上,反应大概有6-10个 次 价差相当大, 但有些门户网站的职位空缺比Vue和2-4多1:50,有些门户网站的职位空缺比Vue和2-4多1:6 次 不仅仅是角. 的需求 反应专家 是强大的, 那么,为什么Vue在GitHub上如此受欢迎(实际上它比反应拥有更多的星星),却没有那么多的职位空缺呢? 我不知道.
我想要一个大的社区,大量的库,对可能出现的问题的快速解决方案.
反应. 不要再看了.
它是否易于使用,是否使开发变得愉快?
再一次, 根据2018年和2017年的JS国家报告, 反应和Vue都享有很好的声誉,大多数开发人员表示他们会再次使用它们. 角, 另一方面, 有一种倾向, 年复一年, 让越来越多的人说他们愿意 不 再用一次.
我想创建一个新的单页应用程序,但是我不想搜索库.
这可能是我唯一会说角是更好选择的地方.
没有大公司. 我想要尽可能的独立,我该选择哪一个呢?
vue -它是我们三巨头中唯一一个独立的. (Facebook支持反应,而谷歌支持角.)
最简单的开始和最快的学习曲线?
Vue /反应. 我更倾向于Vue,但这只是我个人的观点.
为什么? 因为您甚至不需要了解JSX(它是可选的),它基本上只是HTML + CSS + JavaScript.
反应教程:开始你的第一个应用程序
< / div >
现在开始使用反应最简单的方法是使用CRA, 一个CLI工具,可以为你创建一个项目,并帮助你避免Webpack/Babel等所有必要的设置. 相反,您依赖于它在默认情况下的配置方式以及随着时间的推移所包含的内容. 由于这一点,您不需要关心某些关键库的主要更新.
当然,稍后,您可以“弹出”自己,并通过运行自己处理每一个方面 NPM运行弹出
. 这种方法有它自己的优点, 因为你可以用一些原本不可用的东西来增强你的应用.g., decorator), 但它也可能是一个令人头疼的问题,因为它需要许多额外的文件和更多的时间.
所以,首先要做的是:
NPX create-react-app {app-名字}
然后 NPM运行启动
你已经准备好出发了.
类对. 功能组件
我们应该首先解释这些组件的不同之处. 基本上,每个组件都可以是 函数 or class. 它们之间的主要区别在于类1具有一些在函数组件中不可用的特性:它们可以有状态并使用refs, 生命周期, 等. 这是当前的游戏状态,从版本16开始.7(或者由于已经提到的变化,它将被称为), 我们也会有钩子, 因此,状态和refs将有可能与钩子.
类组件有两种类型: 组件
和 Pure组件
. 两者之间唯一的区别是 Pure组件
在你不想“浪费”渲染的情况下,对道具和状态进行肤浅的比较是否有其自身的好处, 一个组件和它的子组件在渲染后处于完全相同的状态. 仍然, it is only a shallow comparison; if you want to implement your own comparison (e.g.(因为你正在传递复杂的道具),只使用 组件
和覆盖 should组件Update
(默认返回true). 自从16.6+,类似的功能组件也可用-感谢 反应.备忘录
哪个是高阶分量,默认情况下是这样的 Pure组件
(比较浅), 然而,它需要第二个参数,您可以在其中传递自己的自定义道具比较.
这是一条经验法则, 如果可以使用函数组件(不需要类特性),那么就使用它. 很快,从16岁开始.7.0,只有生命周期方法才需要使用类组件. 我倾向于认为函数组件更透明, 更容易推理, 为了理解.
反应生命周期方法
< / div >
构造函数(道具)
- 可选, 尤其是CRA这么受欢迎, JavaScript的类字段声明默认包含在哪里. 如果在类体内通过箭头函数绑定方法,那么声明是没有意义的. 类似的状态也可以初始化为类属性.
- 应该只用于初始化本地状态的对象和绑定方法在ES6类.
componentDidMount ()
- 在这里进行Ajax调用.
- 如果需要事件侦听器、订阅等,请在此处添加它们.
- 你可以用
设置状态
这里(但它会使组件呈现).
componentWillUnmount ()
- 清理所有仍在进行的东西.g., Ajax应该被中断、订阅取消、计时器被清除,等等.
- 不要打电话
设置状态
,因为这是毫无意义的,因为组件将被卸载(并且您将得到一个警告)。.
componentDidUpdate(prev道具, prev状态, snapshot)
- 当组件刚刚完成更新时发生(不会在初始渲染时发生).
- 有三个参数是可选的使用(以前的道具, 以前的状态, 并且只有在组件实现时才会出现的快照
getSnapshotBeforeUpdate
).
- 只有在
should组件Update
返回true.
- 如果你使用
设置状态
在这里,你应该保护它,否则你会陷入一个无限循环.
should组件Update (next道具 next状态)
- 仅用于性能优化.
- 如果它返回false,那么渲染将不会被调用.
-
Pure组件
如果被覆盖的SCO只是肤浅的道具/状态比较,可以使用吗.
getSnapshotBeforeUpdate ()
- 可以用于保存有关当前DOM的一些信息,例如.g.,当前滚动位置,稍后可以在其中重用
componentDidUpdate
恢复卷轴的位置.
componentDidCatch(错误,信息)
- 日志错误应该发生的地方.
- 可以调用
设置状态
,但在未来的版本中,它将被丢弃,取而代之的是静态方法 getDerived状态FromError(错误)
,它将通过返回一个值来更新状态.
还有两个额外的方法,它们都是静态的,在其他解释中提到过
静态getDerived状态FromError(错误)
- 这里有错误信息.
- 应该返回一个对象值,该对象值将更新可用于处理错误的状态(通过显示某些内容)。.
- 因为它是静态的,所以它不能访问组件实例本身.
静态getSnapshotBeforeUpdate(道具, 状态)
- 应该在道具随时间变化的情况下使用吗, 根据反应文档, 它可能对转换组件有用.
- 因为它是静态的,所以它不能访问组件实例本身.
请注意, 到目前为止,很少有比这更多的方法可用, 但它们应该在反应 17中被删除.0,这就是为什么这里没有提到它们.
国家对. 道具
让我们从 道具,因为它们更容易更快地解释. 道具是传递给组件的属性,以后可以在组件中重用,用于显示信息/业务逻辑等.
从' 反应 '中导入反应, {组件};
导出默认类App扩展组件{
呈现(){
回报(
);
}
}
const HelloWorld = (道具) => Hello {道具.名字}
在上面的例子中, 名字
是一个道具. 道具是只读元素,不能在子组件中直接更改. 同时, 有一个人们经常做的坏习惯, 也就是将道具复制到状态,然后对状态进行操作. 当然, 有些情况下,你想做一些类似“初始状态,将更新父组件提交后,但在这种情况下,这种情况更为罕见, 初始状态进食可能说得通. 同时, 不仅像字符串这样的属性可以传递给子组件, 还有数字, 对象, 功能, 等.
道具还有一个更有用的东西叫做 default道具
, 一个静态字段,它可以告诉你组件的默认道具是什么(当它们没有传递给组件时), 例如).
如遇“起吊状态”,,其中一个组件(父组件)有一个状态,稍后被它的子组件(例如.g., 一个子节点显示它,另一个子节点允许编辑), 然后我们需要将函数从父级传递给子级, 它允许我们更新父节点的本地状态.
状态另一方面,是可以修改的局部状态,但通过使用 这.设置状态
. 如果有人能直接改变状态, 组件将不会意识到更改,也不会重新呈现以反映所提到的状态更改.
设置状态 是更改局部状态对象的方法(通过执行浅合并)。, 在那之后, 组件通过重新呈现自身来响应. 请注意,在 设置状态
,则 这.状态
属性不会立即反映函数中提到的更改(它具有异步性质) 设置状态
可能会因为优化而批处理在一起. 它有几种方法可以被调用,其中一种可能性允许我们在更新状态后对组件做一些事情:
设置状态({值:' 5 '})
设置状态((状态, 道具) => ({value: 状态.Name + " ' s "})
-
设置状态([object / 函数 like above], () => {})
-这个表格允许我们附上 回调
, 当状态将反映我们想要的数据(在第一个参数中)时,将调用它.
从' 反应 '中导入反应, {组件};
导出默认类App扩展组件{
状态= {
姓名:“某人:)”
}
onClick = () => 这.设置状态({名字: 'You'})
呈现(){
回报(
);
}
}
const HelloWorld = (道具) => Hello {道具.名字}
的反应环境
反应最近稳定了上下文API(在反应中已经存在很长一段时间了), 尽管被一些最流行的库(如回来的)广泛使用,但它还是一个实验性的功能。), 这帮我们解决了一个问题:道具钻. 道具钻孔简而言之就是在结构内部深层传递道具的一种方式.g., 它可以是组件的某种主题, 特定语言的本地化, 用户信息, 等等....... 在语境之前(或者更确切地说,在它变得非实验性之前), 它通过递归的方式从父节点传递到子节点,一直传递到最后一个叶子(显然,回来的也可以解决这个问题)。. 请注意,这个功能只能解决道具钻孔问题,而不能替代回来的或Mobx等功能. 很明显, 如果您仅为此使用状态管理库, 然后你可以自由更换.
结束
这是反应教程的第一部分. 在接下来的文章中, 我们希望讨论更高级的话题, 从样式化到检查类型, 生产部署和性能优化.
< / div >< / div >< / div >
< / div >
了解基本知识
什么是反应?
反应是一种声明式视图库,起源于Facebook,在过去几年中越来越受欢迎. 在网页版本中磨练出来的技能也可以很容易地转化为手机应用的原生版本, i.e. 反应本地.
< / div >< / div >
反应值得学习吗??
简而言之, 如果你是一名前端开发者,想要获得大量的工作机会, 那么你应该学习反应. 反应不仅很流行,而且使用起来也很简单和有趣.
< / div >< / div >
学习反应需要多长时间?
我想说反应非常容易学习, 但在使用它时,人们需要一段时间才能真正感觉良好. JSX也很容易理解,所以一开始应该会有很多问题.
< / div >< / div >< / div >< / div >
标签
< / div >< / div >< / div >< / div >
就这一主题咨询作者或专家.< / div >
预约电话< / div >< / div >