如何将包含登录鉴权逻辑的React类组件转换为函数组件？

核心转换逻辑说明 #

• 用useState Hook管理登录状态isLogin，替换类组件的this.state和this.setState
• 用空依赖的useEffect Hook替代componentWillMount生命周期，实现组件初始化时读取本地存储的登录状态
• 登录授权、销毁授权的方法直接在函数组件内定义，无需处理this绑定问题

转换后完整代码 #

import { useState, useEffect } from 'react';

const AuthComponent = () => {
  // 定义登录状态，初始值默认false
  const [isLogin, setIsLogin] = useState(false);

  // 对应原componentWillMount逻辑，组件初始化执行一次
  useEffect(() => {
    if(localStorage.getItem('IsLogin') === '1') {
      setIsLogin(true);
    }
  }, []); // 空依赖数组保证仅初始化执行一次

  // 对应原setAuth方法
  const setAuth = (userObject) => {
    setIsLogin(true);
    localStorage.setItem('IsLogin', 1);
    localStorage.setItem('user', JSON.stringify(userObject));
  };

  // 对应原setDestroyAuth方法
  const setDestroyAuth = () => {
    setIsLogin(false);
    localStorage.removeItem("IsLogin");
    localStorage.removeItem("user");
  };

  // 后续组件其他渲染逻辑、返回值可自行补充，两个方法可以直接在组件内调用，或者传递给子组件
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
};

export default AuthComponent;

如果需要将setAuth、setDestroyAuth方法暴露给父组件调用，可以结合forwardRef和useImperativeHandle实现。

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