阅读 2567

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

本文翻译自:blog.bitsrc.io/how-to-writ…

如何写出更好的 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。但是,该规则还规定您不应该有像objectarray这样的模糊propType

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

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

那些prop没有得到他们期望的数据的那一刻,你的错误日志会让你知道你要么传递了错误的东西,要么没有传递必须要传的prop,这使得错误更容易被定位,特别是如果你是编写了大量可重用的组件。propTypesdefaultProps还使这些组件更加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的组件。在此组件中有其他组件,如MyOrderMyDownloads。现在我可以在这里内联编写所有这些组件,因为我只是从同一个地方(user)提取数据,将所有这些较小的组件转换为一个巨大的组件。

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

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

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


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

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

您可能已经注意到在上面的代码片段中,我没有将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>
);
复制代码

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

无状态函数组件的思想是它是没有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开发人员。


快速回顾

  • linting:使用 ES Lint、Airbnb 的 JavaScript 样式指南 或者 ESLint 的 React 插件。
  • 使用 propTypes 和 defaultProps。
  • 了解何时需要写新组件。
  • 知道何时编写 Component,PureComponent和无状态函数组件。
  • 使用 React Dev Tools。
  • 在代码中使用内联条件语句。
  • 使用 Snippet Libraries 可以节省大量浪费在样板代码上的时间。
  • 了解 React 如何与 React Internals 协同工作。
  • 使用 Bit / StoryBook 等工具来改进组件开发工作流程
关注下面的标签,发现更多相似文章
评论