将React类组件转换为功能组件

问题描述

我介于将React类组件转换为功能组件之间，这显然是耗时且重复的工作。

作为对此的一种解决方案，我一直在寻找可以帮助我解决此问题的在线工具，但发现了这一点：https://blog.jetbrains.com/webstorm/2018/07/webstorm-2018-2/，这非常了不起，但只有一个简单的组件，因为正在使用以下实时模板。 / p>

function $!NAME(#if($HAS_PROPS)props#end) {
  return $COMPONENT_BODY
}

#if($PROP_TYPES)
$!{NAME}.propTypes = $PROP_TYPES
#end

#if($DEFAULT_PROPS)
  $!{NAME}.defaultProps = $DEFAULT_PROPS
#end

是否存在用于将复杂类转换为功能组件或任何在线工具的实时模板？

任何建议将不胜感激！

解决方法

我建议您查看Glean VSCode扩展名。 但是请注意，它存在一些局限性：例如，Glean在允许重构之前显示警告“ 所有实例方法都将被丢弃” 即使在最简单的代码上，它也可以处理最终的组件代码和导入。

我们已经研究了将将类组件转换为功能组件以便与复杂类一起工作的可能性，但是如果一个类甚至包含最简单的辅助方法，也将需要编写大量代码。另外，在某些情况下语义不明确，事物不可转换（例如，setState具有一个callback参数，但是useState does not等。钩子的生命周期方法似乎是我们不应该碰到的事情，除非对钩子的行为进行了规范/将钩子API扩展为与类方法之间的关系更接近1-1。