反应基础：我学到了什么

在我职业生涯的这个时刻，我是一名早期的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保持输入的状态，即使在连续渲染的情况下也是如此。

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

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