React 类组件转换为函数式

函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。

通用替换

定义

复制代码
class (\w+) extends Component \{

改为

复制代码
const $1: FC = () => {
  • 这是没有 exportprops 的场景

复制代码
(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 (
  <></>
);

值得关注的陷阱

命名冲突

类组件可以具有同名的 attributesprops,例如 this.datathis.props.data

this.data 变为 data,另外 props 经常被解构为 const {data} = props,命名冲突 就产生了。

State 回调

通过 this.setState,我们可以设置一个回调,在 state 确实改变时进行调用,但我们需要把这种方式更新为使用更新的 state 作为依赖的 useEffect

函数 State

如果 state 的值是函数,你需要把这个函数包裹在另一个匿名函数中,否则 hook 版本的 setState 会把这个函数视为回调。

实际上,在大多情况下,这种 state 是和渲染无关的,所以也许使用 useRef 更加合适。

这个文章展示了一些使用 RegExp 的替换,可以使类组件到函数式组件的替换简单点,另外指出了一些在这个过程中你可能会遇到的陷阱,可以特别留意下,不过当然,不同的场景会存在更多的工作要处理。

相关推荐
全栈老李技术面试18 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
zyk_5209 天前
前端渲染pdf文件解决方案
javascript·pdf·react
百锦再11 天前
Python实现浏览器模拟访问及页面解析的全面指南
开发语言·前端·javascript·python·vue·框架·react
zy01010113 天前
useEffect
开发语言·前端·javascript·react·useeffect
ace_TiAmo15 天前
React8+taro开发微信小程序,实现lottie动画
微信小程序·小程序·react·taro
百锦再18 天前
Reactive编程框架与工具
前端·javascript·python·django·vue·框架·react
黄毛火烧雪下19 天前
umi框架开发移动端h5
react·umi
疏狂难除21 天前
【Tauri2】013——前端Window Event与创建Window
前端·javascript·rust·react·tauri2
冴羽yayujs23 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
AI_Auto1 个月前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent