能否重命名Recompose HOC以优化堆栈追踪可读性？

当然可以！这绝对是Recompose开发中提升调试体验的关键技巧之一——默认堆栈追踪里那些模糊的EnhancedComponent或者匿名组件名，真的让人头大。

方法1：用Recompose内置的withDisplayName #

Recompose专门提供了withDisplayName这个高阶组件，用来给你的HOC添加自定义显示名称，用法超简单：

首先导入它：

import { withDisplayName, compose, withState, handleActions } from 'recompose';

然后把你的HOC逻辑用withDisplayName包装起来：

const withMyEnhancement = withDisplayName('withMyEnhancement')(
  compose(
    withState('count', 'setCount', 0),
    handleActions({
      increment: state => ({ count: state.count + 1 })
    })
  )
);

这样一来，当这个HOC涉及的组件抛出错误时，堆栈追踪里就会显示withMyEnhancement这个清晰的名称，而不是默认的匿名标识。

方法2：手动给自定义HOC设置displayName #

如果你是自己手写的自定义HOC，也可以直接给生成的增强组件设置displayName属性，还可以结合Recompose的getDisplayName工具函数，让名称更具描述性：

import { getDisplayName } from 'recompose';

const withMyCustomHOC = WrappedComponent => {
  const EnhancedComponent = props => {
    // 这里写你的HOC逻辑
    return <WrappedComponent {...props} />;
  };

  // 设置显示名称，格式推荐为「HOC名称(被包装组件名称)」
  EnhancedComponent.displayName = `withMyCustomHOC(${getDisplayName(WrappedComponent)})`;
  return EnhancedComponent;
};

比如如果被包装的组件是UserProfile，那么显示名称就会是withMyCustomHOC(UserProfile)，在堆栈追踪里一眼就能看出是哪个HOC包装了哪个组件出了问题。

小提示 #

如果用compose组合了多个HOC，建议至少给整个组合后的HOC设置一个清晰的显示名称；要是能给每个关键的子HOC也单独设置，调试起来会更顺畅。

内容的提问来源于stack exchange，提问作者machineghost