redux-devtools-profiler-monitor 是一个 Redux 开发者工具，它允许你在浏览器中查看 Redux 的性能数据。
安装
在命令行中使用以下命令安装：
npm install --save-dev redux-devtools-profiler-monitor
配置
在 Redux 中使用
在 Redux 中使用 redux-devtools-profiler-monitor 只需要在 DevTools 中的 monitor 列表中添加 ProfilerMonitor。下面是一个示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- - ---- ---------------------------
------ - --------------- - ---- ----------------------------------
----- ----------- - -----------------
-- --------
---
----- ----- - ------------
------------
-- --------------- --
------------------
----- --- --- ----------
--------- -----------------
--
--使用 React 组件
如果你使用 React 开发，你也可以在你的应用程序中添加 ProfilerMonitor 组件。
首先，你需要使用 redux-devtools-extension 提供的 DevTools 组件进行配置。下面是一个示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- - ---- ---------------------------
------ - -------------- - ---- -----------------
------ - --------------- - ---- ----------------------------------
----- -------- - ---------------
---------------- --
--
----- ----------- - -----------------
-- --------
---
----- ----- - ------------
------------
-- --------------- --
------------------
----- --- --- ----------
--
--
-------
--------- --------------
-----
---- --
--------- --
------
------------
-------------------------------
--使用
ProfilerMonitor 允许你查看 Redux 的性能数据。在 redux-devtools 中选择 Profiler，可以查看有关当前 action 的详细信息，包括：
- 向 store 发送 action 的时间
- 每个 reducer 的执行时间
- 构建应用程序状态所需的总时间
此外，你还可以比较不同 action 的性能数据，以便找出是否有性能瓶颈。
示例
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- - ---- ---------------------------
------ - --------------- - ---- ----------------------------------
----- ----------- - -----------------
-- --------
---
----- ----- - ------------
------------
-- --------------- --
------------------
----- --- --- ----------
--------- -----------------
--
--
----------------
----- -----------
--- --
----- ------ ------
---总结
redux-devtools-profiler-monitor 是一个非常实用的工具，它使你可以轻松地查看 Redux 的性能数据。希望本篇文章能够帮助你更好地理解该工具的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b98