在 ES6 和 ES7 中，JavaScript 已经引入了类与模块的特性，随着时代的发展，ES12 引入了对私有字段（Private Fields）和私有方法（Private Methods）的支持，这个新的特性可以帮助我们更好地封装代码，保证模块的稳定性和安全性。本文将介绍在 React 组件中应用 ES12 私有字段和方法的具体实践方法，并探讨一些应用场景。
私有字段和方法的定义
在 ES12 中，我们可以通过在类中定义以 "#" 开头的字段和方法，来实现私有字段和方法的定义。例如：
-- -------------------- ---- -------
----- ------- -
------------- - ---
---------------- -
------ -------------------
-
----------------- -
------ -------------------
-
------------------------ -
------ ----------------------
-
-
----- -------- - --- ----------
---------------------------------------- -- --
----------------------------------------------- -- --在上面的例子中，我们定义了一个 MyClass 类，包含了两个私有成员：一个私有字段 privateField 和一个私有方法 privateMethod。使用 # 号作为前缀即可将其定义为私有成员。在类的内部，我们可以通过 this.#privateField 和 this.#privateMethod() 访问它们。但在类的外部，如上例中的 getPrivateField() 和 getPrivateMethodResult() 方法，我们无法直接访问私有成员，只能通过公有方法间接访问。
React 组件中的应用实践
在 React 组件中，私有字段和方法可以帮助我们更好地封装组件内部的逻辑和状态，避免了私有状态被外部组件或者应用程序误操作的风险。同时，使用私有成员也可以增加组件代码的可读性和可维护性。
使用私有字段来存储状态
我们可以使用私有字段来存储组件的状态，这样可以避免状态被外部组件或者应用程序误操作。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------- - -
------ -
--
-------- -
------ -
-----
------- ---------------------------
------ --------------------------
---------
------
--
-
----------- - -- -- -
---------------------------
-------------------
--
-在上面的例子中，我们定义了一个 MyComponent 组件，并使用私有字段 #privateField 来存储组件的状态。通过在点击事件中增加 this.#privateField.count++ 来改变状态，并通过 forceUpdate() 强制更新组件，从而重新渲染界面。
使用私有方法来封装逻辑
我们可以使用私有方法来封装组件内部的逻辑，避免逻辑被外部组件或者应用程序误操作。同时，使用私有方法也可以增加组件代码的可读性和可维护性。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------- - -- -- -
-------------------- ------ ---------
--
----------- - -- -- -
----------------------
--
-------- -
------ -
-----
------- -------------------------------- -----------
------
--
-
-在上面的例子中，我们定义了一个私有方法 #privateMethod，用来封装一些逻辑。在 handleClick() 方法中，我们可以直接通过 this.#privateMethod() 调用它，而不需要将其暴露给外部组件或者应用程序。
总结
在 ES12 中，我们可以使用私有字段和私有方法来封装代码，保证模块的稳定性和安全性。在 React 组件中，私有字段和方法可以帮助我们更好地封装组件内部的逻辑和状态，避免私有状态被外部组件或者应用程序误操作。同时，使用私有成员也可以增加组件代码的可读性和可维护性。
需要注意的是，私有成员只是一种在语言层面上的封装手段，实际上并不完全安全，因为在类的实例中，私有成员是可以被访问和修改的。因此，在编写代码时，我们需要遵循一些规范和最佳实践，来保证私有成员的安全和稳定性。
示例代码见：https://codepen.io/mona-hy/pen/rgEJXgV。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457a111968c7c53b0a439e5