在 DevTools 中使用 React Hooks 的组件名称

Question

我刚刚将一个基于类的组件更新为函数式组件.

以前在 React 的 DevTools 中，我通常会看到我的组件名为 Gallery ，并具有所有命名状态变量.

但现在，我只能看到一个名为 _default 的组件，并带有一堆不明确的 State: 定义.

根据其他答案，我已经了解到 React Dev Tools 现在支持 hooks，但我还没有看到组件名称错误的示例。

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

版本信息

React 16.9.0

React Developer Tools 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'),
);

开发者工具截图

- Eli Nathan

---

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

明白了！谢谢Jared，是的，这是一个遗留项目，所以它使用gulp-uglify进行代码压缩。只需要微调我的设置即可。但文档中仍然没有明确说明State:是否应该具有实际状态名称。 - Eli Nathan

我不确定React开发者工具的内部工作原理，但我知道以下几点：1. React必须跟踪在渲染时调用了哪些hooks以及它们的顺序（这就是为什么不能有条件地调用它们，否则会破坏顺序跟踪）。因此，它肯定知道任何useState/useReducer的使用以及任何时刻实际状态。2. 根据ES2015标准，绑定到变量的箭头函数的名称是变量的名称，因此您的组件函数应命名为“Gallery”。在构建管道中进行5个步骤后会发生什么取决于管道... - Jared Smith

这就是为什么我建议您尝试使用命名函数表达式，即使在ES3中也会给函数一个适当的名称属性。React工具是否足够聪明以读取它而不是模块级别的“_default”绑定还有待观察。3. React知道它是一个功能组件而不仅仅是一个函数，因为它是渲染树的一部分，所以它知道解构对象实际上是props及其含义。 - Jared Smith

请参考devtools中关于状态名称的答案。https://stackoverflow.com/a/65808453/10128619 - cbdeveloper

Answer 1

在导出之前为您的组件添加displayName。请参考以下链接。 DisplayName 使用方法如Gallery.displayName = 'Gallery'

- Ravi Theja