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

时间  2019-11-17 标签 译 如何 写出 更好 react 代码

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

如何写出更好的 React 代码

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

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

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

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

Linting

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

由于若是咱们设置了一套良好的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 会当即变红并提示：bash

'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开发人员。

快速回顾

  • linting：使用 ES Lint、Airbnb 的 JavaScript 样式指南 或者 ESLint 的 React 插件。
  • 使用 propTypes 和 defaultProps。
  • 了解什么时候须要写新组件。
  • 知道什么时候编写 Component，PureComponent和无状态函数组件。
  • 使用 React Dev Tools。
  • 在代码中使用内联条件语句。
  • 使用 Snippet Libraries 能够节省大量浪费在样板代码上的时间。
  • 了解 React 如何与 React Internals 协同工做。
  • 使用 Bit / StoryBook 等工具来改进组件开发工做流程
联系我们 沪ICP备2021010478号-7