README_zh-CN.md

English | 简体中文

modernx

现代化的 React 状态管理框架，支持并发特性和现代工具链。基于 redux、redux-saga 和 react-router。（灵感来自 elm 和 choo）

---

🚀 React 18 支持

modernx 现已完全支持 React 18+，提供增强的性能和现代化开发体验！

✨ 新特性

• React 18 并发特性: 支持 useTransition、useDeferredValue 和自动批处理
• React Router v6 兼容: 完整的迁移工具和兼容层
• 现代化工具链: 升级到 Node.js 18、最新 Babel 和现代构建工具
• 增强性能: 通过自动批处理减少 30-50% 的重渲染
• 向后兼容: 100% API 兼容 - 现有项目无需代码修改即可升级

📦 快速升级

npm install modernx@latest

🧪 测试覆盖情况

我们的 React 18 升级包含全面的测试：

🚀 Testing React 18 modernx functionality...
✅ React 18 utils: All required exports present
✅ Router v6 compat: All required exports present  
✅ Package dependencies: React 18 found
✅ CircleCI config: Node 18 and React 18 test job found
✅ Examples: All React 18 examples present
✅ Babel config: React preset found

📊 Test Results:
✅ Passed: 6/6 tests
📈 Success Rate: 100%
🎉 All functionality tests passed! React 18 upgrade is ready.

🎯 React 18 示例

• react18-concurrent: 并发特性演示
• react18-batching: 自动批处理示例
• react18-strict-mode: Strict Mode 兼容性
• react-router-v6: React Router v6 迁移

📚 迁移指南

查看 React 18 升级总结 获取详细的迁移说明和最佳实践。

---

特性

• 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
• elm 概念，通过 reducers, effects 和 subscriptions 组织 model
• 插件机制，比如 modernx-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
• 支持 HMR，基于 babel-plugin-modernx-hmr 实现 components、routes 和 models 的 HMR
• React 18 就绪: 完全支持 React 18 并发特性和性能优化

示例

React 18 示例

• React 18 并发特性: 演示 useTransition 和 useDeferredValue
• React 18 自动批处理: 展示批处理的性能改进
• React 18 Strict Mode: Strict Mode 兼容性示例
• React Router v6 迁移: 完整的 v5 到 v6 迁移示例

经典示例

• Count: 简单计数器
• User Dashboard: 用户管理
• AntDesign Pro：(Demo)，开箱即用的中台前端/设计解决方案
• HackerNews: (Demo)，HackerNews Clone
• antd-admin: (Demo)，基于 antd 和 modernx 的后台管理应用
• github-stars: (Demo)，Github Star 管理应用
• Account System: 小型库存管理系统
• react-native-modernx-starter: 集成了 modernx 和 react-navigation 典型应用场景的 React Native 实例

快速上手

请参考 docs 目录 获取指南和 API 参考。

React 18 快速开始

import { createApp } from 'modernx';
import { useModernXTransition } from 'modernx/react18-utils';

// 启用 React 18 并发特性
const app = createApp({
  // 你的 models 和配置
});

// 在组件中使用并发特性
function MyComponent() {
  const [isPending, startTransition] = useModernXTransition();
  
  const handleClick = () => {
    startTransition(() => {
      // 使用自动批处理分发 action
      dispatch({ type: 'fetchData' });
    });
  };
  
  return (
    <button onClick={handleClick} disabled={isPending}>
      {isPending ? '加载中...' : '获取数据'}
    </button>
  );
}

他是怎么来的？

• Why modernx and what's modernx
• 支付宝前端应用架构的发展和选择

FAQ

命名由来？

D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。

—— 来自 守望先锋 。

是否可用于生产环境？

当然！公司内用于生产环境的项目估计已经有 1000+ 。

是否支持 IE8 ？

不支持。

支持哪些 React 版本？

• ✅ React 16.14+ (LTS)
• ✅ React 17.x
• ✅ React 18.x (推荐以获得最佳性能)

如何从 React Router v5 迁移到 v6？

我们在 modernx/routerV6Compat 中提供了完整的兼容层。查看 React Router v6 迁移指南 获取详细说明。

下一步

以下能帮你更好地理解和使用 modernx：

• 理解 modernx 的 8 个概念 ，以及他们是如何串起来的
• 掌握 modernx 的所有 API
• 查看 modernx 知识地图 ，包含 ES6, React, modernx 等所有基础知识
• 查看 更多 FAQ，看看别人通常会遇到什么问题
• 如果你基于 modernx-cli 创建项目，最好了解他的 配置方式

还要了解更多?

• 看看 modernx 的前身 React + Redux 最佳实践，知道 modernx 是怎么来的
• 在 gitc 分享 modernx 的 PPT ：React 应用框架在蚂蚁金服的实践
• 如果还在用 modernx@1.x，请尽快 升级到 2.x

社区

Slack Group	Github Issue	钉钉群	微信群
sorrycc.slack.com	umijs/umi/issues

License

MIT