在 React 项目里使用 ES10 的新特性 optional chaining

随着 JavaScript 的版本更新，我们可以用更简洁的代码来完成我们的任务，ES10 带来了一系列新特性，其中 optional chaining 是一个很有用的特性，它可以使代码更加简洁和易于维护。那么这个特性在 React 项目里如何使用呢？本文将详细介绍。

什么是 optional chaining？

optional chaining 是一个新特性，可以使我们在访问对象的属性时不需要进行类型检测，这样可以简化代码并避免错误。比如：

-- -------------------- ---- -------
----- ---- - -
  ----- -
    ----- -----
  -
--

--------------------------- -- -------- ---------- ------ ---- -------- ----- -- ---------

----------------------------- -- ---------

在上面这个例子中，我们尝试访问 data.info.age，由于 age 属性不存在，因此会抛出异常。但是如果我们使用 optional chaining data?.info?.age，当 data 或 data.info 为 undefined 时，表达式会返回 undefined，而不会触发异常。这个特性可以减少代码的冗余，使用起来非常方便。

在 React 项目中使用 optional chaining

在 React 项目中，optional chaining 经常用在访问 props 或 state 对象的属性上，这样可以保证代码更加健壮和可读。

function UserInfo({ user }) {
  return (
    <div>
      <h2>{user.name && user.name.first} {user.name && user.name.last}</h2>
      {user.job && <p>{user.job.title}</p>}
    </div>
  );
}

在上面的组件中，我们使用了 user.name 和 user.job 属性来显示用户信息。但是如果 user 对象没有 name 或 job 属性，这些访问属性的表达式将会返回 undefined，此时如果我们使用 && 运算符来判断条件，代码会变得很冗余。

使用 optional chaining，我们可以重写代码：

function UserInfo({ user }) {
  return (
    <div>
      <h2>{user?.name?.first} {user?.name?.last}</h2>
      {user?.job?.title && <p>{user.job.title}</p>}
    </div>
  );
}

这样代码就变得简洁且易于阅读，而且当 user 对象没有对应的属性时，表达式会直接返回 undefined，无需额外的判断语句。

注意事项

使用 optional chaining 时需要注意以下几点：

• 只有在需要访问多层对象的属性时才需要使用 optional chaining，如果只需要访问一个对象的属性，则建议使用传统的点语法。
• 在使用 optional chaining 访问数组的元素时需要注意，如果数组对象不存在，则该表达式也会返回 undefined。如果你需要访问数组的元素，建议使用传统的数组下标语法来避免错误。
• optional chaining 是一项相对较新的特性，在某些不支持该特性的浏览器和环境中可能存在兼容性问题。

结论

optional chaining 是一项极其有用的 JavaScript 新特性，可以使我们的代码更短、更简洁。在 React 项目中，使用 optional chaining 可以使我们的代码更具健壮性和可读性。当然，需要注意 optional chaining 的一些细节，以避免代码错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef84fe6fbf9601972fae6e