如何成为一个更好的 React 开发者？

作者 | Siradji Awoual

译者 | 苏本如，责编 | 屠敏

头图 | CSDN 下载自东方 IC

出品 | CSDN（ID：CSDNnews）

以下为译文：

大家好！希望你们在疫情期间平平安安。

今天，我想在这里谈谈不同的内容。我想分享一些React的开发技巧和策略，以帮助你们在React中编写更干净、更好的代码。

大部分我已经分享的或者将要分享的内容，都是关于我在学习编码的过程中遇到的难题。

作为一个没有导师指导的自学型的开发人员，我发现有一件事很难做好，那就是在React中编写干净的代码。

我知道我必须变得更好,但是怎么做呢？

所以我想出了一个解决办法。我先找到5个深受大家尊敬的专业React开发人员，然后我去到他们的GitHub代码库中，从他们的React项目的代码中找到一些共同的东西或/和模式。

我并没有试图将我的代码与任何人的代码进行比较，我只是想知道这些被大家称为“专家”的开发人员到底在他们的代码中添加了什么，他们是如何实现某些功能的、他们采用了什么方法、以及为什么要采用这些方法。

正如预期的那样，我开始有了一些发现，我发现我的代码中缺少的东西，在所有这五个人的代码中都出现了。这些发现对我来说很有意义，因为它可以解释以前的一些做法了。比如说，为什么在需要prop-type时不将其添加到工作流中呢。

从那一天起，我开始把我学到的东西纳入到我的工作流程中。相信我，这有助于我理解React，并且让我的代码看上来不像新手写出来的。

闲话不再赘述。接下来我将分享一些我学到的技巧，这些技巧有些是从我的个人研究中得到的，也有些是通过项目和经验学到的。

注：下面技巧的重要性不以先后次序决定。

prop-type

如果你对React来说是新手，你可能不知道什么是prop-type。但是，如果你一直在使用React,那么你至少有几次机会见过或者使用过React。

什么是prop-type？

基本上，你可以把将prop-type视为一个模块、包、或者其他任何东西，它的作用是对父组件传递过来的值/参数（prop）作类型检查。

比如说，你希望从父组件中传来一个对象值，但是由于某种原因，你接收到的是一个数组，这会导致你的应用程序无法工作，不是吗？

下面是prop-type使用场景的一个例子。你定义了你期望的参数类型，如果你接收到了不同类型的参数/值，那么它就会抛出一个错误。

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

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

}

在上面的代码块中，我们先定义了一个名为App的组件，它接收三个参数（prop）：title、isCompleted和id。接着我们定义了参数类型（prop-type），参数title应该是一个字符串，参数id应该是一个数字，而参数isCompleted应该是一个布尔值。

如果我们接收到的参数类型和我们定义的不一致，我们就会得到一个错误。这是prop-type的基本用例。它的用法可能会有点复杂，但随着时间的推移你会学会如何使用它。

如果你想了解更多关于prop-type的内容，可以参考这个prop-type文档的链接：https://github.com/facebook/prop-types。

在类上使用函数组件（functional component）和钩子（hook）

这个话题有点争议。有些人可能同意我的观点，而另一些人可能不同意。我已经使用过类和生命周期方法，如果我对这些有什么看法的话，那也应该是正面的。

然而，函数组件（functional component）和钩子（hook）是React的未来。React现在的一切变化都是为了更方便地使用hook（React的开发工具也支持这一变化）。

我个人认为，如果你开始一个新的项目，你应该使用钩子和函数组件，但是对于已有的使用类构建的代码库，建议不要进行重构。

我个人喜欢函数组件。我的意思是说，它们更干净，优雅而且更简单。将其添加到你的工作流中可以显著地让你的代码变得干净，并且使你成为更好的开发人员。

使用函数组件和钩子表明开发人员可以很好地适应生态系统。几个月前，我申请工作的公司给了我一个非现场编码测试。我用钩子完成了整个项目，面试官很高兴，因为如果我知道这意味着什么的话，那么说明我“可以顺应潮流”。

使你的组件小而且可重用，但不要过于抽象

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

组件应该相对较小。举个例子，WhatsApp的send部分是一个组件，对吗？

在该组件内部，有send button组件、voice message组件和text area组件。

所有的功能都被分解成短小而简单的代码块。

组件不仅要小，而且要可重用。我并不是说所有的组件都应该是可重用的，但是如果你知道你会在你的应用程序的另一部分中再次使用一个组件，那么这个组件就应该是可重用的。可重用组件的一个很好的例子是button（按钮）组件。

如果我想创建一个按钮组件，我会让它尽可能地通用。按钮的大小、颜色、边框半径都将作为参数（prop）进行传递。

话虽如此，你也不应该过度抽象你的组件。而过度抽象会不必要地使得所有的组件或大部分组件都成为通用组件。

记住，只有在你确信一个组件会在多个地方使用，它才应该成为通用组件。

解构参数（Destructure prop），不要使用prop.{whatever}这样的代码了

这是我在研究过程中的发现之一。所以在我做这些研究之前，我的代码是这个样子的：

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

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

}

是的，我知道上面的代码很难看。不过，我已经想不起来上次这样写是什么时候的事了。现在我是这样写的。

如果参数（prop）只有一层深，我的代码是这个样子的：

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

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

}

如果它是嵌套的，例如redux state，我会这样写：

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

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

}

显然，解构参数比用prop.title这样的写法，看上去更漂亮、更干净。

参数解构可以让你的React代码变得干净，使其可读性更强，并有助于再次清理。

以上是我想在这篇文章和大家分享的内容。希望你能喜欢，并从中学到一些有用的知识。

原文：https://dev.to/siradji/how-to-be-a-better-react-developer-3je9

本文为 CSDN 翻译，转载请注明来源出处。

【END】