【译】如何写出更好的 React 代码

9个有用的小技巧帮助您在React中编写更好的代码：使用Linting，propTypes，PureComponent等。

React使得创建交互式UI变得轻而易举。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React将有效地更新和呈现正确的组件。

在这篇文章中，我将向您展示一些有助于您成为更好的React Developer的技巧。

我将介绍从 工具 到实际代码风格的一系列内容，它可以帮助您提高React的技能。

Linting

对于编写更好的代码而言，一件非常重要的事情就是良好的linting。

因为如果我们设置了一套良好的linting规则，你的代码编辑器将能够捕获任何可能导致代码出现问题的内容。

而且不仅仅是捕捉问题，您的ES Lint设置将不断让您了解React最佳实践。

import react from 'react';
/* Other imports */

/* Code */

export default class App extends React.Component {
  render() {
    const {userIsLoaded, user} = this.props;
    if (!userIsLoaded) return <Loader />;
    
    return (
      /* Code */
    )
  }
}
复制代码

就拿上面的代码片段来说，假设您要在 render（） 函数中引用一个名为 this.props.hello 的新属性。你的 linter 会立即变红并提示：

'hello' is missing in props validation (react/prop-types)
复制代码

Linting将帮助您了解React中的最佳实践并修正您对代码的理解。很快，您将在编写代码时避免犯错。

您可以使用ESLint来为JavaScript设置一个linting工具，也可以使用 Airbnb的JavaScript样式指南 。您还可以安装React ESLint包。

propTypes和defaultProps

在前面的部分中，我谈到了当我尝试传递未经验证的 prop 时我的linter是如何起作用的。

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}
复制代码

在这里，如果我们不需要 userIsLoaded ，那么我们需要将以下代码添加到我们的代码中：

static defaultProps = {
 userIsLoaded: false,
}
复制代码

因此，只要是在组件中使用的 PropType ，我们就需要为它设置一个 propType 。就如在上述示例中，我们需要告诉 React， userIsLoaded 总是一个布尔值。

再次，如果我们不传 userIsLoaded 这个参数，那么我们将需要一个默认的 Prop 。如果我们传 userIsLoaded ，那么我们不必为它定义默认 Prop 。但是，该规则还规定您不应该有像 object 或 array 这样的模糊 propType 。

这就是为什么我们使用 shape 来验证 user ，其中包含另一个 id ，它的 propType 为 string ，并且整个 user 对象是必传的参数。

确保在每个使用 prop 的组件上设置 propTypes 和 defaultProps 将会有很长的路要走。

那些 prop 没有得到他们期望的数据的那一刻，你的错误日志会让你知道你要么传递了错误的东西，要么没有传递必须要传的 prop ，这使得错误更容易被定位，特别是如果你是编写了大量可重用的组件。 propTypes 和 defaultProps 还使这些组件更加self-documenting。

注意：

与早期版本的React不同（译者注：react V15.5以前内置 proptypes ），React 中不再内置 proptypes ，您必须将它们作为依赖项单独添加到项目中。 点击prop-types的npm文档了解更多。

了解何时需要写新组件

export default class Profile extends PureComponent {
  static propTypes = {
    userIsLoaded: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isRequired,
  }

  static defaultProps = {
    userIsLoaded: false,
  }

  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loaded />;
    return (
      <div>
        <div className="two-col">
          <section>
            <MyOrders userId={user.id} />
            <My Downloads userId={user._id} />
          </section>
          <aside>
            <MySubscriptions user={user} />
            <MyVotes user={user} />
          </aside>
        </div>
        <div className="one-col">
          {isRole('affiliate', user={user._id} &&
            <MyAffiliateInfo userId={user._id} />
          }
        </div>
      </div>
    )
  }
}

复制代码

在上面代码中我有一个名为 Profile 的组件。在此组件中有其他组件，如 MyOrder 和 MyDownloads 。现在我可以在这里内联编写所有这些组件，因为我只是从同一个地方（ user ）提取数据，将所有这些较小的组件转换为一个巨大的组件。

虽然没有关于何时将代码移动到组件中的任何硬性规定，但你需要问问你自己： * 您的代码功能是否变得笨拙？ * 它只表示了自己的东西吗？ * 你的代码需要被复用吗？

如果这些问题的答案中的任何一个是肯定的，那么您需要将代码移动到组件中。

请记住，没有人希望在您的代码中看到一个巨大的200-300行的组件。

组件 vs PureComponent vs 无状态函数组件

对于React开发人员来说，知道何时在代码中使用 Component ， PureComponent 和无状态函数组件是非常重要的。

您可能已经注意到在上面的代码片段中，我没有将 Profile 声明为 Component ，而是将其称为 PureComponent 。

首先，让我们来了解一下无状态函数组件。

无状态函数组件

const Billboard = () => (
  <ZoneBlack>
    <Heading>React</Heading>
    <div className="billboard_product">
      <Link className="billboard_product-image" to="/">
        <img alt="#" src="#">
      </Link>
      <div className="billboard_product-details">
        <h3 className="sub">React</h3>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </ZoneBlack>
);
复制代码

无状态函数组件是您的武器库中最常见的组件类型之一。 它们为我们提供了一种简洁明了的方法来创建一个不使用任何 state 、 refs 和生命周期方法的组件。

无状态函数组件的思想是它是没有 state 的，只是一个函数。 所以最重要的是你将组件定义为一个返回一些数据的常量函数。

简而言之，无状态函数组件仅仅是一个返回JSX的函数。

PureComponents

通常，当组件获得新的 prop 时，React 将重新渲染该组件。 但有时候，一个组件获得一些尚未真正改变的新 prop，但 React 仍会触发重新渲染。

使用 PureComponent 将帮助您防止这种不必要的重新渲染。如果prop是字符串或布尔值，当它发生变化时，PureComponent 将识别出这一点。但是如果是对象中的属性发生变化，PureComponent将不会触发重新渲染。

那么你怎么知道React何时触发不必要的重新渲染？ 你可以查看这个令人惊喜的React包，叫做 Why You You Update 。 当发生可能不必要的重新渲染时，此包将在控制台中通知您。

一旦识别出不必要的重新渲染，就可以使用 PureComponent 而不是 Component 来防止不必要的重新渲染。

使用 Bit 来组织，共享和重用组件

Bit是一个很棒的工具，可以将 UI 组件转换为可在不同应用程序中共享，开发和同步的构建块。

您可以利用 Bit 在共享集合中组织团队的组件，使其被团队成员共享，利用她的实时playground，单独测试等特性来让您共享的组件更好用。

通过隔离和共享组件，您可以加快应用程序的开发速度和团队的速度，同时减少重复的代码。它是OSS，OSS是免费的，所以请随意尝试一下。

使用React Dev Tools

如果您真的想成为专业的React Developer，那么您应该已经经常在开发过程中使用React Dev Tools。

如果您使用过React，那么您可能很需要React Dev Tools。

React Dev Tools适用于所有主流浏览器，例如Chrome和Firefox。

通过React Dev Tools，您可以访问React应用程序的整个结构，并允许您查看应用程序中使用的所有 state 和 props。

React Dev Tools是探索React组件并帮助诊断应用程序中任何问题的绝佳方式。

使用内联条件语句

这个 tip 可能会引起一些争议，但我发现使用内联条件语句可以让我的React代码清爽很多。

看看这段代码：

<div className="one-col">
  {isRole('affiliate', user._id) &&
    <MyAffiliateInfo userId={user._id} />
  }
</div>
复制代码

上面代码中， isRole 是一个基本函数，用于检查一个人是否是“affiliate”，然后还有一个名为 <MyAffiliateInfo /> 的组件。

这样写有什么好处：

• 我不需要写一个单独的函数。
• 我不需要在我的渲染函数中写另一个“if”语句。
• 我不需要在组件的其他位置创建“link”。

编写内联条件语句非常简单。首先编写条件语句，如果条件语句的结果是 true ，组件将渲染 <MyAffiliateInfo /> 组件。

接下来，我们使用 && 将此条件语句与 <MyAffiliateInfo /> 链接。 这样，只有在条件语句返回 true 时才会呈现该组件。

尽可能使用Snippet Libraries

打开代码编辑器（我使用 VS Code），并创建一个.js文件。键入 rc 时，在此文件中，您将看到如下内容：

点击 enter 键，你会立即得到这个：

这些代码片段的优点在于它们不仅可以潜在地帮助您规避 bug，还可以帮助您识别最新和最好的语法。

您可以在代码编辑器中安装许多不同的代码片段。我用于VS Code的那个叫做ES7 React / Redux / React-Native / JS Snippets。

React Internals - 了解React的工作原理

React Internals 分五部分讲解了React的基础知识，并最终帮助我成为一个更好的React Developer！

如果您遇到可能无法完全理解的问题，或者您想要了解React的工作原理，那么React Internals将帮助您了解何时以及如何在React中做正确的事情。

这对那些有想法但又不知道在哪里执行代码的人特别有用。了解React如何工作的基础知识将帮助您成为更好的React开发人员。