React 中的可选链式调用

如何使用可选链式调用

与其他选项相比，使用可选链的优势

2020年1月13日更新：Babel 7.8.0 开箱即用，支持可选链式调用

可选链是 Javascript（和 Typescript）中最受欢迎的功能之一，这不足为奇，因为它解决了一个非常基本的问题：安全地访问动态深层对象中的属性。

// A deep structure example 
const deepObject = { 
  firstLevel: { 
    secondLevel: { 
      thirdLevel: 'value' 
    }
  }
}

// Accessing thirdLevel safely without optional chaining
const thirdLevelValue = (((deepObject || {}).firstLevel || {}).secondLevel || {}).thirdLevel

// Accessing thirdLevel safely with optional chaining
const thirdLevelValue = deepObject?.firstLevel?.secondLevel?.thirdLevel

使用可选链的主要优点是代码更小更简洁，一旦人们习惯了这种语法，就更容易理解。

如何使用可选链式调用

去年秋季，可选链式调用提案进入了候选阶段（第三阶段），这意味着该规范已非常接近最终版本。这一变化促使它在 2019 年 10 月底被纳入 TypeScript 3.7，并在 2019 年 12 月初被纳入 Create React App 3.3.0。此外，Prettier 等支持工具也已添加了对可选链式调用的支持。

如果您使用的是上述编辑器之一，那么可选链式调用应该可以直接使用。目前（2019 年 12 月），像 VSCode 这样的主流编辑器可能需要一些配置才能处理这种新语法，但我预计这种情况很快就会改变。如果您遇到任何问题，请查看下面的“配置 VSCode 以处理可选链式调用”主题。

使用 Babel 的可选链式调用

幸运的是，使用 React 开发时，TypeScript 或 CRA 并不是使用可选链的必要条件。您可以使用 Babel 7.8.0及更高版本，或者使用可选链插件（@babel/plugin-proposal-optional-chaining）来实现同样的功能。

由于 Babel 通常不是单独使用，而是作为工具链的一部分，因此所需的软件包可能因配置而异。如果您是 Babel 新手，我建议您首先参考以下教程/代码库之一：

1. Babel 设置
2. Babel 与 Webpack
3. Babel 与 ParcelJS

如果您使用的是 7.8.0 之前的版本，则需要使用以下命令安装可选链式插件：

npm install --save-dev @babel /plugin-proposal-optional-chaining

并将其添加到 .babelrc 文件中

{
  ...,
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

完成这些步骤后，你的设备应该就能正常工作了。

配置 VSCode 以处理可选链式调用

VSCode 默认使用 TypeScript 检查 JavaScript React 代码，但目前不支持可选链式调用。有以下方法可以解决这个问题：

1. 安装ms-vscode.vscode-typescript-next 扩展，该扩展添加了对新 TypeScript 特性的支持，包括可选链式调用。

2. 禁用TypeScript 和 JavaScript 检查，并在 VSCode 中安装和设置ESLint 扩展，并配置 ESLint 以处理可选链。

配置 ESLint 以处理新语法

ESLint 需要babel-eslint包才能理解新的语法。

npm install --save-dev babel-eslint

它还需要对.eslintrc 文件进行额外的配置。

{
  "parser": "babel-eslint",
  ...
}

与其他选项相比，使用可选链的优势

如果你使用 JavaScript（尤其是 React）开发已有一段时间，你可能使用过一些函数来处理动态的、较长的路径，以确保路径不会出错。这些函数可能是内部开发的，也可能是来自外部包的，例如Lodash 的 Get 函数或Ramda 的 Path函数。

所有这些功能仍然像以前一样可用，但在代码中使用面向未来的原生方式使其更具前瞻性，并减少了所需的外部代码量。目前，可选链式调用需要始终进行转译，但将来不会如此。一旦浏览器和 NodeJS 开始支持它，就可以无需更改代码即可取消转译。