反应基础:我学到了什么

2020-11-03 22:15:51

在我职业生涯的这个时刻,我是一名早期的Javascript全栈开发人员。我对Javascript有很好的了解,但是Reaction有时会让我更头疼才能深入理解。我是在学习基于类的组件的过程中长大的,所以后来,当钩子被引入时,我发现很难过渡到这种新的编写Reaction的方式。这就是我想上这门课的原因。

作为我学习过程的一部分,我不会记录下每一节的所有内容,而是记下我学过的每一节。通常,我的解决方案虽然可行,但比肯特的方案更复杂,也不那么优雅。这是我希望在编码中改进的另一个方面。

当然,你会在epicreact中找到更多的细节和研讨会本身。dev.我希望这会对除我之外的其他人有用,并原谅我在英语方面的错误(不是以英语为母语的人)。

在第一个练习中,有必要使用普通Javascript进行一些DOM操作。由于我在日常工作中使用了这种方法,所以在第一部分中我没有遇到任何困难。事实上,在将严重依赖jQuery的代码库转换为普通Javascript的过程中,我学到了很多。

然而,我确实不得不对额外的锻炼做了一些思考,因为我不习惯于处理身体的根元素。所以我个人并不知道-但现在我知道了,这很有意义-Document对象中有一个Body对象。我不会在这里给出解决方案,但这是一个重要的提醒,要始终检查父元素…。它们里面藏着什么:)。

研讨会的第二个练习已经更棘手了-我对此很高兴,因为我肯定不想再学同样的东西了。我们使用React.createElement的频率很低(如果有的话)。使用JSX我们只需跳过这一部分,但这就是它在暗中工作的方式。所以在了解了jQuery在Javascript中做了什么之后,现在它在Javascript中是Reaction。

我在这里了解到的第一件事是,在REACTION中著名的属性‘Child’对应于普通JS中的textContent。当然,这是有意义的,事实上,我们正在呈现一些用HTML可视化生成的文本。

第二件事是createElement有三个(或更多)可以传递的参数。

事实上,甚至不必在createElement的第二个参数中定义Child属性,但可以在方法的末尾列出。

第三个练习是关于创建简单的JSX元素,Babel将使用React.createElement将这些元素转换为普通的JS。由于它基本上是前几次练习的反向工程,所以并不困难。但是,有趣的是,在div元素中使用了散布操作符,createElement将其放置在正确的位置:

Const className=';myClass=#39;;const Children=';This is my text';;const props={Children,className}element=<;div{...props}/>;

视频中的另一个有趣之处是关于使用扩散操作符的位置优先排序。假设我们有上面的道具,但是我们想用另一个名称覆盖className,我们必须在放置道具之前放置散布道具。在综合中,右边的参数总是优先于左边的参数。

现在,我们终于开始创建组件了。第一部分在于创建一个基本上返回div的函数,因此我们不在呈现的元素中重复div div,而是将函数与字符串一起作为“Child”传递。我知道但显式忘记的一件事是,如果我将参数作为对象传递给函数,则该参数也必须是对象。所以:

接下来是引用相同的helloFunction,但将其作为元素直接通过babel编译,而不需要通过createElement。多亏了JSX,这是可能的,只需将函数名的第一个字母作为大写,并在Element对象中引用它就足够了。HelloFunction=()={}。

接下来,是实现用于类型检查的proTypes的时候了,给出了具有两个参数(都是字符串)的相同的上述函数。在研讨会中,我们解释了如何制作用于手动检查类型的proTypes函数。但有趣的是,它没有利用道具类型库。诚然,对于两个道具的简单检查,导入整个库是过多的;但我认为我永远不会只使用两个检查。

我也没有收到个性化的信息,但是标准的警告是可以理解的

啊,我们开始吧,在下一个练习中有一个库…的实现。哎呀,我有点过头了。但好的一点是,要实现也是‘isRequired’

在本练习中,需要以各种方式将样式应用到自定义组件。在第一部分,只需将内联样式添加到一个小div;然后添加到传递其className道具的自定义组件;最后,仅传递一个字符串作为大小道具,并在自定义组件内动态选择样式。

第一个注意事项:在制作可重用组件时,通常最好将所有缺省值放在左侧以及用户提供的内容(扩散操作符)之后,因为我们不想强制执行某些内容。

第二个注解:和往常一样,我把事情搞得过于复杂了。由于传递的Size属性将仅为Small、Medium和Large,并且类称为box-Small、Box-Medium、Box-Large,因此用传递给组件的Size道具替换Size就足够了。

将其添加到一个三元运算符中,以防它不是道具,我所做的是一个嵌套的三元运算符,其中包含一个用类名创建的对象。要复杂得多,尽管它使用的是😁。

常量大小={Small:#39;box--Small';,Medium:';box--Medium';,Long:';box--Large&39;}className={`box${size=#39;Small';?尺码。小:尺码=#39;中号?Sizes.Medium:sizes.Large}`}。

在第一个练习中,对象将创建一个提交侦听器/处理程序,它将调用作为道具传递的主组件中的函数。

我们可以将事件(将是Reaction合成事件)放在每个元素上;但是,onSubmit进入表单内部以捕获所包含的每个字段。合成事件是响应创建的对象,其外观和行为与常规DOM事件相似。仍然可以使用event.nativeEvent访问DOM事件,但是,合成事件已优化为使用Reaction代码和虚拟DOM。

然后,我在函数内创建了一个函数(回调),一旦单击提交按钮就会调用该函数。我已经向该事件添加了brementDefault(),以防止页面刷新(作为表单的默认事件)。

另一个有趣的事情是关于可访问性。屏幕阅读器需要将输入与其标签相关联。因此需要为输入提供id和标签htmlFor(与普通HTML中的=参数相同)。此外,这提供了在单击输入时将焦点放在输入上的特性。

练习的第二部分是关于执行与上面相同的操作,但使用useRef挂钩。UseRef只是指向元素的引用指针,首先,它需要从“action”而不是“action-dom”导入。

然后,将引用添加到Main函数(或自定义组件)中的输入<;input ref={usernameInput}>;,我们可以调用钩子:const usernameInput=useRef(Null);为什么是null?UseRef的参数是初始值。但在本例中,我们不需要这些,只需要usernameInput中的内容。

最后,我们可以通过以下方式访问所有引用的属性,如输入值:usernameInput.current.value。

在下一个积分中,需要创建受控输入。受控输入是由组件状态控制的输入字段。这意味着通过以下状态设置输入值:<;input ref={usernameInput}value={username}onChange={handleChange}/>;

然后,我们可以在组件顶部设置状态:const[username,setUsername]=useState(';';);最后,使用该状态更改handleChange函数中输入值。在本例中,将每个关键点转换为小写:

因此流程如下:来自用户的输入->;更新输入状态->;转换输入状态->;将状态作为输入的值发送-&>输入出现在屏幕上。

在本例中,这些练习只是一个小小的演示,目的是展示在通过映射显示DOM中的元素时使用唯一索引键的重要性。不是没有,不是使用MAP函数的预置索引,而是使用一组预设的键来使用。这还允许Reaction保持输入的状态,即使在连续渲染的情况下也是如此。

不这样做是一个错误,会导致任何类型的不可预测的行为。这是我以前做过的,在面试中也花了我很多分。

这就是史诗反应基础部分的全部内容。我已经知道接下来的工作坊会更有挑战性,但是知道/被提醒一些基础知识是很有用的。