将 `console.log` 添加到所有 `useEffect`

Question

出于开发目的，我希望可以选择在我的 React 应用程序中记录对 useEffect 的所有使用。有没有一种简单的方法可以扩展此功能的行为？我正在使用 Webpack，以防这会为我们提供一种额外的方式。

另外，因为这会导致很多 console.log，有没有办法通过提供识别调用 useEffect 的组件的信息来区分它们？

如果应用程序冗余重新呈现，我想让这种行为“直观地”检查（在控制台中）。

Answer 1

I would like to have this behaviour to “visually” check (in the console) if the application redundantly rerenders.

有一个图书馆可以为您做这件事：https://github.com/welldone-software/why-did-you-render#readme

repo 有一个简单的设置示例：

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

将 `console.log` 添加到所有 `useEffect`

Add `console.log` to all `useEffect`

logging

reactjs

webpack

react-hooks

use-effect