如何写出更好的 React 代码？

译者 jonjia 爱贝睿技术团队

使用 React 能够轻松建立交互式界面。为应用中的每一个状态设计简单的视图，当数据变化时，React 会高效地更新和渲染正确的组件。

这篇文章中，我会介绍一些使你成为更好的 React 开发者的方法。包括从工具到代码风格等一系列内容，这些均可以帮助你提高 React 相关技能。 💪

---

代码检查

要写出更好代码，很重要的一件事就是使用好的代码检查工具。若是咱们配置好了一套代码检查规则，代码编辑器就能帮咱们捕捉到任何可能出现的代码问题。

但除了捕捉问题，ES Lint 也会让你不断学习到 React 代码的最佳实践。

import react from 'react';
/* 其它 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 的新属性。代码检查工具会立刻把代码变红，并提示：

props 验证没有 'hello' (react/prop-types)
复制代码

代码检查工具会让你认识到 React 的最佳实践并塑造你对代码的理解。很快，以后写代码的时候，你就会开始避免犯错了。

你能够去 ESLint 官网 为 JavaScript 配置代码检查工具，或者使用 Airbnb’s JavaScript Style Guide。也能够安装 React ESLint Package。

---

propTypes 和 defaultProps

上一节中，我谈到了当使用一个不存在的 prop 时，个人代码检查工具是如何起做用的。

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

在这里，若是 userIsLoaded 不是必需的，那么咱们就要在代码中添加说明：

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

因此每当咱们要在组件中使用 参数类型检查，就要为它设置一个 propType。如上，咱们告诉 React：userIsLoaded 的类型永远是一个布尔值。

若是咱们声明 userIsLoaded 不是必需的值，那么咱们就要为它定义一个默认值。若是是必需的，就没有必要定义默认值。可是，规则还指出不该该使用像对象或数组这样不明确的 propTypes。

为何使用 shape 方法来验证 user 呢，由于它内部须要有一个 类型为字符串的 id 属性，而整个 user 对象又是必需的。

确保使用了 props 的每一个组件都声明了 propTypes 和 defaultProps，这对写出更好的 React 代码颇有帮助。

当 props 实际获取的数据和指望的不一样时，错误日志就会让你知道：要么是你传递了错误的数据，要么就是没有获得指望值，特别是写可重用组件时，找出错误会更容易。这也会让这些可重用组件更可读一些。

注意：

React 从 v15.5 版本开始，再也不内置 proptypes，须要做为独立的依赖包添加到你的项目中。

点击下面的连接了解更多：

• prop-types：用于运行时检查 React props 和相似对象类型的工具

---

知道什么时候建立新组件

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} />
            <MyDownloads 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 行的组件时都会抓狂的，而后没人会想再看你的代码。

---

Component vs PureComponent vs Stateless Functional Component

对于一个 React 开发者，知道在代码中何时该使用 Component、 PureComponent 和 Stateless Functional Component 是很是重要的。

你可能注意到了在上面的代码中，我没有将 Profile 继承自 Component，而是 PureComponent。

首先，来看看无状态函数式组件。

Stateless Functional Component（无状态函数式组件）

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 或 生命周期方法 的组件。

无状态函数式组件的特色是没有状态而且只有一个函数。因此你能够把组件定义为一个返回一些数据的常量函数。

简单来讲，无状态函数式组件就是返回 JSX 的函数。

PureComponents

一般，一个组件获取了新的 prop，React 就会从新渲染这个组件。但有时，新传入的 prop 并无真正改变，React 仍是触发从新渲染。

使用 PureComponent 能够帮助你避免这种从新渲染的浪费。例如，一个 prop 是字符串或布尔值，它改变后，PureComponent 会识别到这个改变，但若是 prop 是一个对象，它的属性改变后，PureComponent 不会触发从新渲染。

那么如何知道 React 什么时候会触发一个没必要要的从新渲染呢？你能够看看这个叫作 Why Did You Update 的 React 包。当没必要要的从新渲染发生时，这个包会在控制台中通知你。

一旦你确认了一个没必要要的从新渲染，就可使用 PureComponent 替换 Component 来避免。

---

使用 React 开发者工具

若是你真想成为一个专业的 React 开发者，那么在开发过程当中，就应该常用 React 开发者工具。

若是你使用过 React，你的控制台极可能建议过你使用 React 开发者工具。

React 开发者工具适用于全部主流浏览器，例如：Chrome 和 Firefox。

经过 React 开发者工具，你能够看到整个应用结构和应用中正在使用的 props 和 state。

React 开发者工具是探索 React 组件的绝佳方式，也有助于诊断应用中的问题。

---

使用内联条件语句

这个观点可能会引发一些争议，但我发现使用内联条件语句能够明显简化个人 React 代码。

以下：

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

上面代码中，有一个检查这我的是不是 “affiliate” 的方法，后面跟了一个叫作 <MyAffiliateInfo/> 的组件。

这样作的好处是：

• 没必要编写单独的函数
• 没必要在 render 方法中使用 “if” 语句
• 没必要为组件中的其它位置建立“连接”

使用内联条件语句很是简洁。开始你能够把条件写为 true，那么 <MyAffiliateInfo /> 组件不管如何都会显示。

而后咱们使用 && 链接条件和 <MyAffiliateInfo />。这样当条件为真时，组件就会被渲染。

---

尽量使用代码片断库

打开一个代码编辑器（我用的是 VS Code），新建一个 js 文件。

在这个文件中输入 rc，就会看见以下提示：

按下回车键，会马上获得下面的代码片断：

这些代码片断的优势不只是帮助你减小 bug，还能帮助你获取到最新最棒的写法。

你能够在代码编辑器中安装许多不一样的代码片断库。我用于 VS Code 的叫作 ES7 React/Redux/React-Native/JS Snippets。

---

React Internals — 了解 React 内部如何工做

React Internals 是一个共五篇的系列文章，帮助我理解 React 的基础知识，最终帮助我成为一个更好的 React 开发者！

若是你对某些问题不能彻底理解，或者你知道 React 的工做原理，那么 React Internals 能够帮助你理解什么时候、如何在 React 中作对的事。

这对那些不清楚在哪里执行代码的人特别有用。

理解 React 内部运行原理会帮助你成为更好的 React 开发者。

---

在你的组件中使用 Bit 和 StoryBook

Bit 是一个将你的 UI 组件转化为能够在不一样应用中分享、开发和同步的构建块的工具。

你也能够利用 Bit 管理团队组件，经过 线上组件区，可使它们容易获取和使用，也便于单独测试。

• Bit — 共享共创代码组件：Bit 让使用小组件构建软件更简单有趣，在你的团队中分享同步这些组件

Storybook 是用于 UI 组件的快速开发环境，能够帮助你浏览一个组件库，查看每一个组件的不一样状态，交互式开发和测试组件。

Storybook 提供了一个帮你快速开发 React 组件的环境，经过它，当你操做组件的属性时，Web 页面会热更新，让你看到组件的实时效果。

---

快速回顾

1. 使用代码检查工具，使用 ES Lint、Airbnb’s JavaScript Style Guide 和 ESLint React 插件。
2. 使用 propTypes 和 defaultProps。
3. 知道什么时候建立新组件。
4. 知道什么时候使用 Component、PureComponent 和 Stateless Functional Component。
5. 使用 React 开发者工具。
6. 使用内联条件语句。
7. 使用代码片断库，节省浪费在样板代码上的时间。
8. 经过 React Internals 了解 React 如何工做。
9. 使用像 Bit、StoryBook 这样的工具来优化开发流程。

翻译自 How To Write Better Code In React，祝好。

---

关于咱们：

公众号：