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

相关推荐
冴羽yayujs1 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
AI_Auto4 天前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent
YiHanXii5 天前
Axios 相关的面试题
前端·http·vue·react
百锦再6 天前
Reactive编程:应用场景和传统比较
运维·开发语言·javascript·python·flask·react·tornado
冴羽yayujs8 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
shmily_yyA9 天前
Nextjs15 - 什么是CSR、SSR、SSG和ISR
前端·react
小周不摆烂9 天前
React 揭秘:从新手到高手的进阶之路
前端框架·react
渴望成为python大神的前端小菜鸟10 天前
2025前端面试题(vue、react、uniapp、微信小程序、JS、CSS、其他)
前端·javascript·vue.js·面试·微信小程序·uni-app·react
冴羽yayujs15 天前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
任磊abc19 天前
在react当中利用IntersectionObserve实现下拉加载数据
前端·react·observer·下拉加载·intersection