译：101个React技巧#7React代码调试技巧🐞

ikonan
253 阅读4分钟

49. 使用 StrictMode 在部署到生产环境前捕获组件中的错误

使用 StrictMode 是一种在开发过程中主动检测应用中潜在问题的方法。

它可以帮助识别以下问题：

  • 副作用中未完成的清理，比如忘记释放资源
  • React 组件中的不纯行为，确保在相同输入（props、state 和 context）下返回一致的 JSX

下面的例子展示了一个错误，因为 clearInterval 从未被调用。StrictMode 通过运行两次副作用来捕获这个问题，这会创建两个定时器。

🏖 沙盒

50. 安装 React Developer Tools 浏览器扩展来查看/编辑组件并检测性能问题

React Developer Tools 是必备扩展（Chrome、Firefox）。

这个扩展可以让你：

  • 可视化并深入了解 React 组件的细节，检查从 props 到 state 的所有内容
  • 直接修改组件的 state 或 props 来查看变化如何影响行为和渲染
  • 分析应用以识别组件何时以及为何重新渲染，帮助你发现性能问题
  • 等等

💡 在这个优秀的指南中学习如何使用它。

51. React DevTools 组件：高亮显示渲染的组件以识别潜在问题

每当怀疑应用有性能问题时，我都会使用这个技巧。你可以高亮显示渲染的组件来检测潜在问题（例如过多的重新渲染）。

下面的 gif 显示每当时间变化时 FollowersListFn 组件都会重新渲染，这是错误的。

高亮显示组件渲染时的更新。

52. 在自定义 Hook 中使用 useDebugValue 以便在 React DevTools 中获得更好的可见性

useDebugValue 可以方便地为 React DevTools 中的自定义 Hook 添加描述性标签。

这使得直接从 DevTools 界面监控它们的状态变得更加容易。

例如，考虑这个我用来获取并显示当前时间的自定义 Hook，每秒更新一次：

function useCurrentTime(){
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1_000);
    return () => clearInterval(intervalId);
  }, [setTime]);

  return time;
}

❌ 不好： 没有 useDebugValue，实际的时间值不会立即可见；你需要展开 CurrentTime Hook：

当前时间在开发者工具中不能快速查看

✅ 好： 使用 useDebugValue，当前时间立即可见：

useDebugValue(time)

当前时间在开发者工具中快速可见

注意：谨慎使用 useDebugValue。它最适合用于共享库中的复杂 Hook，在这些情况下理解内部状态至关重要。

53. 使用 why-did-you-render 库来跟踪组件渲染并识别潜在性能瓶颈

有时，组件会重新渲染，但原因并不立即明显 🤦♀️。

虽然 React DevTools 很有帮助，但在大型应用中，它可能只提供模糊的解释，如 "hook #1 rendered"，这可能毫无用处。

应用因为 hook 1 的变化而重新渲染

在这种情况下，你可以转向 why-did-you-render 库。它提供了更详细的关于组件为何重新渲染的见解，帮助更有效地定位性能问题。

我在下面的沙盒中做了一个示例 👇。多亏了这个库，我们可以找到 FollowersList 组件的问题。

🏖 沙盒

why-did-you-render 控制台日志

54. 在 Strict Mode 中隐藏第二次渲染的日志

StrictMode 有助于在应用开发早期捕获错误。

然而，因为它会导致组件渲染两次，这可能会导致重复的日志，从而可能使控制台变得混乱。

你可以在 Strict Mode 中隐藏第二次渲染的日志来解决这个问题。

查看下面的 gif 了解如何操作 👇：

在 Strict Mode 中隐藏第二次渲染的日志

avatar
文章
阅读
粉丝