React 和 Redux 是当今前端开发中最为常用的工具之一，它们的独特之处在于对声明式编程和单向数据流的支持。然而，有时我们会在使用 React Redux 进行开发时遇到问题，其中之一就是无限循环的陷阱。
问题描述
在 React Redux 应用中，我们经常会使用 connect() 函数来将组件与 Redux Store 中的 state、dispatch 等关联起来，实现数据和视图的同步更新。然而，当我们在某个组件中不小心修改了其 props 的值，那么 connect() 会检测到这些 props 发生了变化，并触发 mapStateToProps() 函数的执行，从而重新计算新的 props，最终导致组件进行重渲染。
这本身并没有问题，但是如果我们重渲染组件时还会改变它的 props 值，那么这个过程就会无限循环下去，直至浏览器崩溃。这种情况下，我们需要避免触发循环渲染，否则程序将无法正常运行。
解决方案
避免循环渲染的方法有很多种，这里介绍其中最为常见的两种。
浅比较
在 Redux 中，我们可以使用 shallowEqual() 函数来比较新旧 props 是否相同。在 connect() 中，每次触发 mapStateToProps() 函数时会自动执行这个函数，用于检测新旧 props 是否有变化，如果没有则跳过重新渲染操作，否则进行渲染。
-- -------------------- ---- ------- ------ - -------- ------------ - ---- ------------- ----- ----------- - -- ---- -- -- - --- - ----- --------------- - ----- -- -- ----- ---------- -- ------ ------- ------------------------ ----- ----- - ------------------- ------------ ---------------
在这里，我们通过将 shallowEqual 函数作为 connect() 的第四个参数传入，手动指定检测 props 变化的方法，以达到避免循环渲染的目的。
需要注意的是，shallowEqual 函数仅通过比较 props 的内存地址来判断 props 是否相同，因此对于对象和数组类型的 props 需要特别注意。
自定义比较函数
shallowEqual 比较函数虽然简单，但并不总是适用于所有情况。对于复杂的数据类型或者需要更加精细的比较过程时，我们可以自定义比较函数。
在 connect() 中，我们可以将一个自定义比较函数作为 areStatePropsEqual 或 areOwnPropsEqual 的值，然后在比较时执行该函数。
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ----------- - -- ---- -- -- - --- - ----- --------------- - ----- -- -- ----- ---------- -- ----- ---------------- - ----------- ---------- -- - -- ------- - ------ ------- ------------------------ ----- ----- - ---------------- ---------------
需要注意的是，自定义比较函数必须满足一些特定的条件，才能被 connect() 正确地执行。具体可参考官方文档《API 文档 - connect() 函数》。
示例代码
下面是一个基于 React Redux 的示例代码，演示了如何通过浅比较和自定义比较函数来避免循环渲染陷阱。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - --------- -------- ------------ - ---- -------------
------ - ----------- - ---- -------
----- ------------ - -
----- --
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
----- -----------
-
--------
------ -----
-
-
----- ----- - --------------------
----- ----------- - -- ---- -- -- -
-- ------- ----
----- ----------- - -- -- -
----- ------- - --------- --------------
----------------
----- -----------
----- -------
--
-
------ -
-----
-------------- -- -
---- -----------------------
---
------- ------------------------- -------------
------
-
-
----- --------------- - ----- -- --
----- ----------
--
-- -----
----- ------------ - ------------------------ ----- ----- -
------------------- ------------
---------------
-- -------
----- ------------ - ------------------------ ----- ----- -
----------------- ----------- ---------- -- -
------ --------------------- --- ---------------------
-
---------------
----- --- - -- -- -
------ -
--------- --------------
-----
------------- --
------------- --
------
-----------
-
-
------ ------- ---在这个示例中，我们通过将不同的附加参数传递到 connect() 函数中，来使用不同的比较函数来避免循环渲染。你也可以自由发挥，根据具体需求来选择合适的解决方案。
总结
在 React Redux 中避免无限循环渲染陷阱并不是一件容易的事情，但是只要我们掌握了正确的解决方法，就可以轻松解决这个问题。本文介绍了浅比较和自定义比较函数两种常见的解决方案，同时提供了示例代码供大家参考。如果你在开发过程中也遇到了类似的问题，希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bab3d48841e98949f6b64
