什么是 react-transform？
react-transform 是一个 webpack 插件，它使我们可以在运行时修改 React 组件的行为，从而增加调试、开发和测试的效率。它提供了多个转型器（transformer），每个转型器可以改变组件的不同方面，比如：
- add-component-display-name：向组件添加 display name；
- react-transform-catch-errors：在开发模式下，将组件中的错误转换成组件的 UI；
- react-transform-hmr：支持热替换并自动注册变化。
- ...
安装
首先，你需要在你的工程中安装 react-transform：
npm install --save-dev react-transform
接着，在你的 webpack.config.js 文件中添加 react-transform：
-- -------------------- ---- -------
-- -----------------
--- ---- - ----------------
--- ------- - -------------------
--- ----------------- - -------------------------------
--- ----------------- - ---------------------------------------
--- -------------- - ---------------------------
-------------- - -
-------- ------------------
------ -
--------------------------------
-------------
--
------- -
----- ----
--------- ------------
----------- ------------------------
--
-------- -
--- -----------------------------------------
--- -------------------------------------
--- -------------------------
--- -------------------
--------- -----------------
------- -------
--------- ------------
---
--
------- -
-------- --
----- ----------
-------- ----------
-------- -------------------- ------
-- -
----- ---------
------- ---------------------------------- ----------------
--
--
-------- -
----------- ---- ------ -------
--
--------------- -
----------- --
---------- ----------------------
-------- ----------
------- -----------
--
-
--使用
你可以在你的组件外面添加转型器，也可以在你的组件内部添加转型器。如果你想在组件外面添加转型器，可以借助 react-proxy：
-- -------------------- ---- -------
------ - ----- - ---- --------------
------ - -------------- - ---- ------------------
----- --------- - -
-
---------- ------------------
---------------- -
------------------- - ----------------
-------------
------ -- -- -----
---
-
-
--
----- --------- - -- -- -
---------- ------------
--
----- -------------------- - -------------------------------------
----------------
--------------------- ---
------------------------------
--transform() 函数可以用来为当前组件添加转型器。transform() 以数组形式接受一个或多个转型器，这些转型器会依次被调用，并返回包裹了当前组件的一个新组件。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- --------------
------ - -------------- - ---- ------------------
----- --------- - -
-
---------- ----------------------
-------- ----------
------- ----------
-
--
----- --------- - -- -- -
---------- ------------
--
----- -------------------- - -------------------------------------
----------------
--------------------- ---
------------------------------
--总结
react-transform 可以提供实时编辑的功能，允许开发人员对应用程序进行快速调试和测试。它提供了许多转型器，可以为我们的开发工作带来很大的便利性。我们可以在组件外部、组件内部添加转型器，使得我们可以更加自由地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/react-transform