使用React Hooks将类组件转换为函数组件的正确方法

核心问题排查 #

• 触发Identifier 'isInputActive' has already been declared报错的原因：isInputActive是组件自己管理的内部状态，不是父组件传进来的props，根本不需要在组件入参的解构里写出来；在入参里解构了同名变量，又在内部用useState声明了一次同名变量，同作用域下重名声明自然会报语法错。
• 状态修改的逻辑错误：useState是用来创建状态的Hook，不是用来修改状态的方法。修改状态必须用它返回的第二个返回值（也就是拿到的setIsInputActive），之前在onBlur里直接调用useState({ isInputActive: false })的写法完全是错误的，既不会修改状态，还会触发Hook的调用规则报错。
• 逻辑漏项：原类组件里用到的onChange如果是父组件传入的props，需要在组件入参里显式解构出来，不然函数组件里根本拿不到这个方法，会报未定义的错误。

完整可运行的转换代码 #

// 需先引入React和useState依赖
import React, { useState } from 'react';

// 仅解构从父组件传入的onChange，isInputActive作为内部状态不需要写在入参解构里
const HelloWorld = ({ onChange }) => {
  // 对应原类组件constructor中定义的初始state
  const [isInputActive, setIsInputActive] = useState(false);

  // 原render方法中定义的focusHandler逻辑直接平移即可
  const focusHandler = () => {
    onChange('');
    setIsInputActive(true);
  };

  return (
    <input
      onFocus={focusHandler}
      // 原类组件onBlur中的setState逻辑，直接替换为对应的状态setter方法
      onBlur={() => {
        setIsInputActive(false);
      }}
    />
  );
};

export default HelloWorld;

通用转换规则对照 #

• 类组件构造函数中定义的this.state初始值 → 替换为useState声明的组件内部状态
• 类组件中所有this.setState({ key: value })调用 → 直接替换为对应状态key的setter(value)方法
• 类组件render方法内定义的事件处理函数，直接平移到函数组件的函数体内部即可，不需要额外做this绑定

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