随着 ES11（ECMAScript2020）发布，我们看到了一些非常强大的新功能和特性，其中包括许多与 React 无缝配合的功能。本文将介绍两个新功能：可选链和空值合并，并探讨它们如何在 React 中使用以及何时应该使用。
可选链
在 React 中，我们通常会编写庞大的复杂组件树，访问这些组件树中深层次数据的方法通常是使用对象属性的点表示法（object.property）或数组下标表示法（array[index]）。但是在组件树较深的深层次级别，未定义的属性访问可能会导致运行时错误。例如，假设一个组件在引用以下数据时出现错误：
const myData = this.props.customers[0].orders[0].products[0].name;
如果组件在渲染时发现值 customes 或数组 orders 或 products 的任何一个键未被定义，将抛出运行时错误。这可能是一个很大的问题，因为一个未定义的属性可能使整个应用程序崩溃。
ECMAScript 2020 中引入了可选链功能，可选链为我们提供了解决这种情况的方便方法。如果某个属性或方法不存在，它就会对之后的访问进行简单的短路处理，而不会引发运行时错误。下面是一个使用可选链的示例：
const myData = this.props.customers?.[0]?.orders?.[0]?.products?.[0]?.name;
这个示例使用问号符 ? 表示法在每个键访问之前做了检查，如果一个键不存在，整个链就会短路并返回 undefined。这个解决方法比手动检查数据是否存在要简单得多，并可以帮助我们避免许多潜在的运行时错误。
空值合并
另一个与可选链密切相关的功能是空值合并运算符 ??。它允许我们在访问可能未定义的属性时提供一个默认值，而不会引发运行时错误。举个例子，下面是我们如何使用空值合并运算符在 React 组件中设置默认值：
const myDefaultColor = this.props.color ?? 'green';
在这个例子中，如果 this.props.color 未定义，代码将使用 green 作为默认颜色值。如果未提供默认值，当使用 undefined 作为默认值时，其他未定义的值将被视为 0 或 ''，这可能会导致混乱和错误的结果。
结论
使用可选链和空值合并，我们可以轻松地访问 React 组件树中的嵌套对象和数组，而不必担心未定义的属性或元素访问可能导致的错误。这两个新功能的使用应该谨慎，应该了解何时使用以及何时不使用。当你处理需要长时间运行或需要性能优化的庞大组件树时，不建议使用可选链或空值合并，因为它们可能会导致额外的开销和性能瓶颈。
总之，ES11 带来了许多新的功能和特性，其中可选链和空值合并是 React 开发人员不可或缺的工具之一。请注意其使用，并在需要时尝试使用以获得更好的代码可读性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c3aefa336082f253e51ed