Next.js 找到所有重新渲染

在使用 Next.js 进行开发时，需要时刻注意性能问题，尤其是页面的渲染问题。如果页面的某个部分没有任何改变，就不应该进行重新渲染。因此，我们需要知道 Next.js 会在哪些情况下会触发重新渲染。

1. 什么会导致重新渲染？

当以下情况发生时，Next.js 会触发重新渲染：

• 页面跳转
• 用户输入
• 窗口大小变化
• 网络请求结果到达
• 全局状态变化

但有时我们只想重新渲染页面的某个部分，而不是整个页面。因此，我们需要知道哪些组件会被重新渲染，哪些组件不会被重新渲染。

2. 如何找到所有重新渲染的组件？

Next.js 提供了 React Devtools（React 开发工具），可以帮助开发者找到所有进行了重新渲染的组件。

要使用 React Devtools，首先需要在项目中安装它。执行以下命令即可：

npm install react-devtools -D

安装完成后，在项目的 package.json 文件中添加以下代码：

"scripts": {
  "dev": "NODE_OPTIONS=--inspect node ./node_modules/.bin/next dev",
  "postinstall": "node -e \"require('fs').symlink('../react-devtools-extensions/build/npm/react-devtools', './node_modules/react-devtools-core');\""
}

然后执行以下命令以启动开发服务器：

npm run dev

在启动完成后，打开浏览器并访问 chrome://inspect，点击“Open dedicated DevTools for Node”按钮打开 Node.js 开发者工具。在 Node.js 开发者工具中打开控制台，并输入以下代码：

require('react-devtools-core').connectToDevTools();

执行该代码后，就可以在 React Devtools 中看到组件树了。

在 React Devtools 中选择某个组件，在组件的右侧会显示其状态和 props。如果该组件发生了重新渲染，状态和 props 的值也会发生相应的改变。从而可以方便地找到所有进行了重新渲染的组件。

3. 注意事项

需要注意的是，使用 React Devtools 可能会导致少量的性能损失，因此在生产环境中应该关闭它。

此外，有些情况下可能会出现组件没有正确显示在 React Devtools 中的情况。这时可以尝试关闭 Next.js 的缓存以解决该问题。

参考链接：

• https://reactjs.org/docs/developer-tools.html
• https://github.com/facebook/react-devtools
• https://github.com/facebook/react/issues/11848