如何在React函数式组件中使用Refluxjs替代类组件

Reflux的Store监听属于典型的副作用逻辑，完全可以结合函数组件的useEffect钩子实现，不需要依赖类组件的生命周期，具体实现方案如下：

• 基础逻辑部分：Action、Store的定义和类组件场景完全一致，不需要做任何改造，示例如下：

// 定义Action
const UserActions = Reflux.createActions([
  'fetchUserInfo',
  'updateUserInfo'
]);

// 定义Store
const UserStore = Reflux.createStore({
  listenables: [UserActions],
  init() {
    this.userInfo = {};
  },
  onFetchUserInfo() {
    // 模拟接口请求逻辑
    setTimeout(() => {
      this.userInfo = { name: '张三', age: 25 };
      this.trigger(this.userInfo);
    }, 500);
  },
  onUpdateUserInfo(newInfo) {
    this.userInfo = { ...this.userInfo, ...newInfo };
    this.trigger(this.userInfo);
  }
});

• 组件内适配：用useState存储Store返回的响应式状态，用useEffect处理订阅、取消订阅逻辑，避免内存泄漏，组件示例如下：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [userInfo, setUserInfo] = useState({});

  useEffect(() => {
    // 组件挂载时注册Store监听
    const unsubscribe = UserStore.listen((newUserInfo) => {
      setUserInfo(newUserInfo);
    });

    // 可选：挂载时触发初始数据请求
    UserActions.fetchUserInfo();

    // 组件卸载时取消监听
    return () => {
      unsubscribe();
    };
  }, []); // 空依赖保证仅在挂载/卸载时执行一次

  return (
    <div>
      <p>用户名：{userInfo.name}</p>
      <p>年龄：{userInfo.age}</p>
      <button onClick={() => UserActions.updateUserInfo({ age: userInfo.age + 1 })}>
        增加年龄
      </button>
    </div>
  );
}

• 可复用封装：如果项目内大量用到Reflux，可以把通用监听逻辑封装为自定义Hook，减少重复代码：

// 自定义Reflux监听Hook
function useRefluxStore(store) {
  const [storeData, setStoreData] = useState(
    store.getInitialState ? store.getInitialState() : {}
  );

  useEffect(() => {
    const unsubscribe = store.listen((data) => {
      setStoreData(data);
    });
    return () => unsubscribe();
  }, [store]);

  return storeData;
}

封装后组件使用更简洁：

function UserProfile() {
  const userInfo = useRefluxStore(UserStore);

  useEffect(() => {
    UserActions.fetchUserInfo();
  }, []);

  // 其余渲染逻辑和之前一致
}

注意：如果需要监听多个Store，只需要在同一个useEffect中注册多个监听，清理函数中依次调用对应取消订阅方法即可。

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