React 是一个广泛使用的 JavaScript 库，用于构建 UI。React 中使用的PureRenderMixin是一个非常重要的工具，它可以优化 React 应用程序的性能。
在本文中，我们将学习在 React 中如何使用 PureRenderMixin，并深入了解它的工作原理。
什么是 PureRenderMixin？
React 应用程序的性能由其渲染数决定。当React应用程序渲染时，它检查每个组件的 props 和 state 是否有变化。如果没有变化，则不需要重新渲染该组件。
在 React 中，我们可以使用PureRenderMixin来提高应用程序的性能。这个 mixin 可以分辨出哪个组件需要重新渲染，哪个不需要。
如何使用 PureRenderMixin？
我们可以使用 npm 包中的 react-addons-pure-render-mixin 来使用 PureRenderMixin。
--- ------- ------------------------------
在我们的组件中引入:
------ ------ - --------- - ---- -------- ------ --------------- ---- ---------------------------------
接下来，我们需要将PureRenderMixin添加到组件中。我们使用 **React.createClass()**，并添加该 mixin：
----- ----------- - -------------------
------- ------------------
-------- -
------ ---------- -------------
-
---使用 class 语法构造器：
----- ------------- ------- --------- -
------------------ -
-------------
-------------------------- - -------------------------------------------------
-
-------- -
------ ---------- -------------
-
-这段代码将 PureRenderMixin 与我们的组件绑定，并告诉 React 在渲染组件时使用它。当特定的组件的props/ state没有更改时，它会阻止不必要的渲染，并提高应用程序的性能。
指南意义
通过了解 PureRenderMixin 的工作原理，我们快速地更好地优化了我们的 React 应用程序。这使得我们的应用程序更快，更具响应性。
除此之外，这个 mixin 还有很多其他用途。例如，我们可以使用它来处理 React 表格，React 列表等更大型的数据集。在这些场景下，使用 PureRenderMixin 可以显著提高应用的性能。
示例代码
------ ------ - --------- - ---- --------
------ --------------- ---- ---------------------------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
--
-------------- - --------------------------
-
----------- -
--------------------- ---------------- - ----
-
-------------------------------- ---------- -
------ ------------------------------------------------ ---------- -----------
-
-------- -
----- - ----- - - -----------
------ -
-----
------- -------------------------------------------
--------------------
------
--
-
-在这个示例代码中，我们创建了一个计数器组件，并将 PureRenderMixin 应用于该组件。
当我们点击“增加”按钮时，PureRenderMixin 只会重新渲染 Count 组件一次。这确保我们在不需要的情况下不会重新渲染组件，从而提高了应用程序的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65883