TypeScript开发React项目无法识别componentDidUpdate等生命周期函数如何解决

基于TypeScript的React项目完全可以正常使用componentDidMount、componentDidUpdate、componentWillUnmount等类组件生命周期函数，这类API是React类组件的原生标准能力，和TypeScript语法无冲突。你遇到的无法识别问题，基本都是使用场景或者配置错误导致的，和技术栈本身的兼容性无关。

常见错误原因及修复方案 #

• 在函数组件中调用类生命周期API
  生命周期函数仅支持在继承React.Component或React.PureComponent的类组件中使用，你可以正常使用Hook说明你当前写的是函数组件，函数组件本身没有类实例也不支持生命周期API，只能用Hook实现对应逻辑。
  正确的TypeScript类组件写法示例：

  import React from 'react';
  // 声明props、state的TS类型
  interface IMyComponentProps {
    title: string;
  }
  interface IMyComponentState {
    count: number;
  }
  // 继承React.Component，传入泛型类型
  class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
    state = {
      count: 0
    }
    // 可正常识别、使用生命周期函数
    componentDidUpdate(prevProps: IMyComponentProps, prevState: IMyComponentState) {
      if (prevProps.title !== this.props.title) {
        console.log('title属性已更新');
      }
    }
  
    render() {
      return <h1>{this.props.title}: {this.state.count}</h1>
    }
  }
  

• 类型依赖版本不匹配
  检查项目中@types/react、@types/react-dom的版本是否和你安装的react、react-dom主版本一致，版本差过大可能会出现类型识别失效的问题，卸载不匹配的类型包重新安装对应版本即可。
• 语法拼写错误
  注意生命周期函数的大小写和拼写必须完全符合规范，比如componentDidUpdate首字母是小写，不能写错拼写，也不能把生命周期函数写在render方法或者其他类内部函数的作用域里。

替代方案说明 #

如果你的项目优先使用函数组件开发，用useEffect实现componentDidUpdate的逻辑是更符合当前React官方推荐的开发习惯，需要跳过首次渲染、仅在更新时执行的写法示例如下：

import React, { useEffect, useRef } from 'react';

const MyFuncComponent = () => {
  // 标记是否为首次渲染
  const isFirstMount = useRef(true);

  useEffect(() => {
    if (isFirstMount.current) {
      isFirstMount.current = false;
      return;
    }
    // 此处逻辑等价于类组件的componentDidUpdate执行逻辑
    console.log('组件更新完成');
  }, [/* 此处填写依赖项，对应你需要监听变化的状态/属性 */])

  return <div>函数组件示例</div>
}

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