ES12（也称作 ES2021）是 ECMAScript 的最新版本，其中包含了一些新的功能和语法，为前端开发带来了更多的便利和效率。本篇文章主要介绍 ES12 中对于 React 开发者最为重要的新功能，包括可选链操作符、Nullish 合并操作符、Promise.allSettled() 方法、WeakRefs 和 Finalizers 等。
可选链操作符
在 React 开发中，我们经常需要访问对象的属性或方法，但是如果对象不存在或者属性不存在，就会出现运行时错误。ES12 中的可选链操作符 ?. 可以解决这个问题，它可以在访问对象属性或方法时自动进行空值检查，如果对象或属性不存在，则返回 undefined，而不是抛出错误。
示例代码：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- ----------
-
--
-- ----
----- ---- - ---- -- ------------ -- ------------------
-- ---
----- ---- - --------------------Nullish 合并操作符
在 React 开发中，我们经常需要设置默认值，以防止出现 undefined 或 null 的情况。ES12 中的 Nullish 合并操作符 ?? 可以帮助我们更方便地设置默认值，它只会在左侧的值为 null 或 undefined 时才返回右侧的值，否则返回左侧的值。
示例代码：
// 传统写法 const name = user.name || 'Unknown'; // 新写法 const name = user.name ?? 'Unknown';
Promise.allSettled() 方法
在 React 开发中，我们经常需要同时发起多个异步请求，并等待它们全部完成后再进行下一步操作。ES12 中的 Promise.allSettled() 方法可以帮助我们实现这个功能，它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象，该 Promise 对象在所有输入的 Promise 对象都已经 settled（即已经 fulfilled 或 rejected）后才会 settle，返回一个由所有 Promise 对象状态组成的数组。
示例代码：
-- -------------------- ---- -------
----- -------- - -
---------------------
---------------------
--------------------
--
----------------------------
------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
--------------------------
- ---- -
---------------------------
-
---
---WeakRefs 和 Finalizers
在 React 开发中，我们经常需要处理大量的数据，而这些数据可能会占用大量的内存。ES12 中的 WeakRefs 和 Finalizers 可以帮助我们更好地管理内存，减少内存泄漏的问题。
WeakRefs 是一种新的引用类型，它不会阻止垃圾回收器回收对象。我们可以通过 WeakRefs 来跟踪对象的引用情况，并在对象被回收时进行相应的处理。Finalizers 是一种新的函数类型，它可以在对象被垃圾回收器回收之前执行一些清理操作，例如关闭文件、释放资源等。
示例代码：
-- -------------------- ---- ------- -- -- ------- ----- --- - --- ------------- -- -- ------- ----- ----- --- - ------------ -- -- --------- ----- --------- - --- ------------------------ -- - -- ---------------- ------------------- -- ----- -- -- ------- ------------ ----- --- -- ----- --------- ----------------------- ----- -----------
结语
ES12 中的这些新功能和语法为 React 开发者带来了更多的便利和效率，同时也提高了代码的可读性和可维护性。我们应该及时学习和掌握这些新功能，以便更好地应对实际开发中的各种场景。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da17cfa941bf71341cf68d