DevTools 中带有 React 钩子的组件名称

Posted 2023-02-21

【中文标题】DevTools 中带有 React 钩子的组件名称

【英文标题】：Component name with React hooks in DevTools

【发布时间】：2020-01-27 14:13:30

【问题描述】：

我刚刚将一个基于类的组件更新为功能组件。

当我查看 React 的 DevTools 时，我通常会看到名为 Gallery 的组件以及所有已命名的状态变量。

现在，我看到的只是一个名为 _default 的组件，其中包含一堆非描述性的 State: 定义。

从其他答案中，我了解到 React Dev Tools 现在支持钩子，但我没有看到任何组件名称错误的示例。

这是正常行为还是我做错了什么？

版本

反应16.9.0

React 开发者工具 Chrome 扩展：4.1.1

在 Firefox 中也遇到同样的问题。

组件代码

// The component
import React,  useState, useEffect  from 'react';

const Gallery = ( images, layout ) => 
  const [showLightbox, toggleLightbox] = useState(false);
  const [activeImage, setActiveImage] = useState(false);

  return (
    // Some JSX here
  )
;

渲染代码

// Rendering the component
import React from 'react';
import  render  from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';

render(
  <Gallery images=images />,
  document.getElementById('image-gallery'),
);

开发工具截图

【问题讨论】：

我并没有真正尝试过，因为我个人不太关心组件名称，但可能会尝试使用命名函数表达式const Gallery = function Gallery(...) ... 而不是箭头函数来定义组件。是的，这是正常行为：您使用 webpack 的默认导出/导入（来自 CRA？），因此它被编译为 _default。

明白了！谢谢 Jared，是的，它是一个遗留项目，所以它使用 gulp-uglify 进行缩小。只需对我的设置进行调整即可。不过，在文档中仍然没有看到关于 State: 是否应该具有实际状态名称的任何说明？

我不确定 React 开发工具的内部是如何工作的，但我知道的是： 1. React 必须跟踪渲染时调用了哪些钩子，以及以什么顺序（即为什么你不能有条件地调用它们，它会扰乱订单跟踪）。所以它肯定知道 useState/useReducer 的任何使用以及任何时间点的实际状态。 2. 根据 ES2015 标准，绑定到 var 的箭头函数的名称是 var 的名称，因此您的组件函数应命名为“Gallery”。在构建管道中的 5 个步骤之后会发生什么取决于管道......

...这就是为什么我建议您尝试使用命名函数表达式，即使在 ES3 中也可以为函数提供正确的名称属性。 React 工具是否足够聪明地阅读它而不是模块级别的 _default 绑定是一个悬而未决的问题。 3. React 知道它是一个函数组件而不仅仅是一个函数，因为它是渲染树的一部分，所以它知道被解构的对象实际上是 props 以及它们是什么。

在 devtools 中查看有关州名的答案。 ***.com/a/65808453/10128619

【参考方案1】：

尝试在导出前向组件添加 displayName。检查以下链接以供参考。 DisplayName

像Gallery.displayName = 'Gallery'一样使用它