第十四节：实战场景-何实现全局状态管理？

React.createElement调用示例
Babel插件对JSX的转换逻辑

React 全局状态管理实战与 JSX 转换原理深度解析

一、React 全局状态管理实现方案

1. Context API + useReducer 方案（轻量级首选）

// 创建全局 Context 对象
const GlobalContext = createContext();

// 定义状态管理逻辑
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    default: return state;
  }
};

// 创建全局 Provider
const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <GlobalContext.Provider value={{ state, dispatch }}>
      {children}
    </GlobalContext.Provider>
  );
};

// 子组件使用状态
const Counter = () => {
  const { state, dispatch } = useContext(GlobalContext);
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>
    {state.count}
  </button>;
};

优势：零依赖、代码简洁，适合中小型项目
劣势：频繁更新时需手动优化性能（如配合 useMemo）

2. Redux 方案（企业级复杂场景）

// 创建 Redux Store
const store = createStore(counterReducer);

// 组件连接 Redux
const mapState = state => ({ count: state.count });
const mapDispatch = { increment: () => ({ type: 'INCREMENT' }) };
connect(mapState, mapDispatch)(Counter);

// 现代用法（React-Redux Hooks）
const count = useSelector(state => state.count);
const dispatch = useDispatch();

优势：时间旅行调试、中间件生态完善
劣势：学习曲线陡峭，需编写较多模板代码

3. 新兴方案对比

二、JSX 转换逻辑深度解析

1. React.createElement 调用机制（传统模式）

// JSX 代码
const element = <div className="box">Hello</div>;

// Babel 转换后
React.createElement(
  "div",
  { className: "box" },
  "Hello"
);

转换规则：
• 标签名 → 字符串参数
• 属性 → 合并为对象参数
• 子元素 → 后续参数依次排列

2. 新版 JSX Runtime 转换（React 17+）

// 转换后使用自动导入的 jsx 函数
import { jsx as _jsx } from "react/jsx-runtime";
_jsx("div", { className: "box", children: "Hello" });

核心改进：
• 减少 2-5KB 的打包体积
• 支持编译期静态优化（如常量提升）
• 无需手动引入 React

3. Babel 转换配置实践

// .babelrc 配置示例
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic", // 自动选择新旧模式
      "importSource": "@emotion/react" // 支持 CSS-in-JS
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "throwIfNamespace": false // 允许自定义命名空间
    }]
  ]
}

三、性能优化关键技巧

1. 状态管理优化

// 使用选择器避免无效渲染
const user = useSelector(state => state.user.info);

// 拆分高频/低频更新状态
const [fastState, setFastState] = useState();
const [slowState, setSlowState] = useState();

2. 转换逻辑优化

// 使用 Fragment 减少 DOM 层级
<>...</>

// 静态 JSX 提前编译（SSR 优化）
import { staticJsx } from './compiled-components';

四、架构选型指南

五、扩展学习资源

1. React 官方文档 - Context API 高级模式
2. Babel 插件开发 - 自定义 JSX 转换规则
3. 状态管理基准测试 - 不同方案的性能对比

以上方案可根据具体项目需求组合使用，建议中小型项目优先采用 Context API + useReducer 方案，逐步演进架构。