函数式的 React 组件更加现代，并支持有用的 hooks，现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。
通用替换
定义
从
class (\w+) extends Component \{
改为
const $1: FC = () => {
- 这是没有
export和props的场景
从
(export) default class (\w+) extends Component \{
改为
$1 const $2: FC<$2Props> = () => {
- 作为第二个捕捉的单词，
$2就是组件名。 $2Props应该定义为props的接口名。
Attributes 前缀
从
this\.(state\.|props\.)?
改为
- 假设
props被统一解构。
生命周期函数
从
componentDidMount() {
改为
useEffect(() => {}, []);
componentDidUpdate也可以被转换为useEffect，并设置合适的依赖。componentWillUnmount可以转换为对应useEffect处理函数的返回函数。
State 相关语句
从
state = {
data: null,
};
改为
const [data, setData] = useState();
从
this.setState({
data,
});
改为
setData(data)
类方法
从
^(\s*)(\w+)\((\w*)\) \{
改为
$1const $2 = ($3) => {
- 这属于常规函数定义。
$1是空格,$2是方法名,$3是参数.
从
^(\s*)((\w+) = (async )?\((\w+(, )?)*\) =>)
改为
$1const $2
- 这属于箭头函数定义。
$1是空格,$2方法名之后的所有内容
类 Getter
从
^(\s*)(get) (\w+)\(\)
改为
$1const $2\u$3 = () =>
\u表示对后面捕获的单词首字母大写。- 对 getter 的调用应该在方法名后加上
()。 - 如果 getter 很简单，可以直接赋值而不用使用函数。
渲染函数
从
render() {
return (
<></>
);
}
改为
return (
<></>
);
值得关注的陷阱
命名冲突
类组件可以具有同名的 attributes 和 props，例如 this.data 和 this.props.data。
当 this.data 变为 data，另外 props 经常被解构为 const {data} = props，命名冲突 就产生了。
State 回调
通过 this.setState，我们可以设置一个回调，在 state 确实改变时进行调用，但我们需要把这种方式更新为使用更新的 state 作为依赖的 useEffect。
函数 State
如果 state 的值是函数，你需要把这个函数包裹在另一个匿名函数中，否则 hook 版本的 setState 会把这个函数视为回调。
实际上，在大多情况下，这种 state 是和渲染无关的，所以也许使用 useRef 更加合适。
这个文章展示了一些使用 RegExp 的替换，可以使类组件到函数式组件的替换简单点，另外指出了一些在这个过程中你可能会遇到的陷阱，可以特别留意下，不过当然，不同的场景会存在更多的工作要处理。