嗨，大家好！希望您平安无事。

我想谈谈今天不同的东西。我想分享一些技巧和策略，这些技巧和策略将帮助您在响应中编写更干净，更好的代码。

我将来写或将要写的大部分内容都与我在学习编码时遇到的困难有关。
作为一个没有指导者的自学成才的开发人员，我发现困难之一就是在React中编写干净的代码。
我知道我必须变得更好。但是如何？
所以我想出了一个解决方案。找到5个受人尊敬且专业的React开发人员，转到其GitHub存储库，并在他们的React项目中找到一个常见的事物或模式。

我没有试图将我的代码与任何人的代码进行比较。我只想了解这些所谓的专业人员在他们的代码中添加了什么，他们如何实现某些东西，采用的方法以及原因。

正如预期的那样，事情开始冒出来，我的代码中缺少的东西全部出现在五个代码中。一切开始变得有意义。例如，为什么在不需要时将prop-types添加到您的工作流程中。

TL; DR

从那天起，我开始将我学到的所有内容都包括在我的工作流程中。并相信我，这有助于我理解反应，并使我的代码不像新手那样。

说话够了。我将分享一些从我的研究中学到的技巧，以及从项目和经验中学到的一些技巧。

这不是它们的任何顺序。

1.道具类型

如果您是新手，您可能不知道什么是道具类型。但是，那些一直在使用react的人至少会看到或使用几次。

什么是道具类型？

基本上，prop-types是一个模块/包或任何您可以称为它的，为我们的props提供类型检查的东西。
举例来说，假设您期望父元素有一个对象prop，并且由于某种原因收到了数组。那会给您的应用造成混乱，不是吗？
这里是道具类型出现的地方。您定义所需的道具类型，如果传递相反的内容，则会引发错误。

Const App = ({title, id, isCompleted}) => {
//
}

App.propTypes = {
Id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
isCompleted: PropTypes.bool.isRequired

}

在上面的代码块中，我们有一个组件app，它接收三个道具-title，isCompleted和id。在下面，我们定义了prop-types，title应该是字符串，id应该是数字，isCompleted应该是布尔值。
因此，如果收到与定义相反的信息，则会出现错误。那是道具类型的基本用例。它可能变得有点复杂，但是随着时间的流逝您将学会。

这是prop-types文档的链接

2.使用功能组件并钩住类。

好的，这个有点争议。有些人可能同意我的观点，而另一些人则不同意。我使用过类和生命周期方法，如果我对它们有话要说，那将是积极的。

然而，功能组件和挂钩是未来的反应。React使一切都变得更适合钩子（react开发工具将支持该主张）。
我认为，如果您要开始一个新项目，请使用挂钩和功能组件，但是对于使用类构建的现有代码库，请不要进行重构。
我个人喜欢功能组件。我的意思是，它们更干净，优雅且更简单。将其添加到您的工作流程中将极大地清理您的代码，并使您成为更好的开发人员。

使用功能组件和挂钩是开发人员可以适应生态系统的标志。几个月前，我正在申请工作的这家公司给我提供了外带编码测试。我用钩子完成了整个项目，面试官很高兴，因为如果我知道那意味着什么，那么“您就可以顺应潮流”。

**我很快会很快写有关高级钩子的教程**

3.使组件小巧且可重用，但不要过度抽象。

react的主要特征之一是将所有内容都包含在组件中。组件中的反应相当于乐高积木。它们是构建应用程序的一小段代码。

您的组件应该相对较小。例如，WhatsApp的send部分是组件吗？
在该组件内部，有发送按钮组件，语音消息组件和文本区域组件。
一切都分解为小的，简单的代码块。
组件不仅要小而且可以重复使用。我并不是说所有组件都应该可重用，只有您知道将在应用程序的另一部分中重用的组件才可以重用。一个可重用组件的好例子是一个按钮。
如果我想创建一个按钮组件，我将使其尽可能通用。大小，颜色，边框半径将作为道具传递。

话虽如此，您不应该过度抽象您的组件。通过过度抽象，我的意思是使所有或大部分组件通用。
请记住，通用组件是您肯定会在多个地方使用它的组件。

4.破坏道具。不再需要道具。

这是我进行的研究的发现之一。所以在研究之前，我的代码就像

const myApp = (props) =>{
 ///

   <h1>{props.title.heading}</h1>
  onChange={props.onChange}

}

是的，看起来很丑，我知道。我不记得上次这样做了。这就是我现在要做的。

如果道具刚好在水平

const myApp = ({title, onChange}) =>{
 ///
    Const {heading}= title

   <h1>{heading}</h1>
  onChange={onChange}

}

如果是嵌套的，例如redux状态，我会执行类似的操作。

const myApp = ({chat:{messages}, settings:{themes}}) =>{
 ///
    Const {sentMsg, recievedMsg}= 
    messages
    Const {dark, light}= themes

   <h1> Theme color {dark}</h1>
   <li> {sentMsg} </li>

}

显然，销毁比执行props.title ….事情漂亮和干净。

销毁将清除您的反应代码，使其非常可读并再次干净。

就是这样！我希望您喜欢它并从中学到一些东西。

注意安全