React中useMemo的依赖项不变，函数却多次执行的原因
在React应用中，useMemo 钩子用于优化性能，避免不必要的计算。然而，即使依赖项（dependencies）保持不变，useMemo 的回调函数有时仍会多次执行。本文分析其原因，并提供解决方案。
问题描述
此问题通常出现在包含React.StrictMode 的开发环境中。 一个使用useTransition 钩子的示例中，useMemo 回调函数即使依赖项requestUrl 没有变化，也会多次执行。
原因分析
问题的根源在于React.StrictMode。StrictMode 是一种用于在开发环境中检测潜在问题的工具，它不会影响生产环境。StrictMode 会故意“双重渲染”某些组件，以帮助开发者发现诸如不正确的副作用处理等问题。这种双重渲染导致useMemo 的回调函数即使依赖项未改变，也会被执行两次。
解决方法
解决方法很简单：
-
暂时禁用
StrictMode: 在开发环境中，如果多次执行useMemo回调函数造成了困扰，可以暂时禁用StrictMode以便调试。 但请记住，StrictMode的作用是帮助你发现问题，所以正式发布前务必在StrictMode下测试代码。以下是如何在React应用中启用/禁用
StrictMode的示例：// 禁用 StrictMode // ReactDOM.render(
, document.getElementById('root')); // 启用 StrictMode ReactDOM.render( -
优化代码逻辑: 如果禁用
StrictMode不是理想方案，则需要检查你的代码逻辑，确保没有其他因素导致不必要的重新渲染。例如，检查组件的props是否在每次渲染时都发生了变化，即使是微小的变化也可能触发重新渲染。
结论
useMemo 回调函数在依赖项不变时多次执行，通常是由于开发环境中的React.StrictMode 导致的。理解StrictMode 的作用，并合理使用它，有助于更好地调试和优化你的React应用程序。 在生产环境中，useMemo 会按照预期工作，只在依赖项发生变化时执行。
