Kea 1.0 版本重大更新解析：全面重构与功能增强

Kea 1.0 版本重大更新解析：全面重构与功能增强

kea Production Ready State Management for React 项目地址: https://gitcode.com/gh_mirrors/ke/kea

概述

Kea 1.0 是对 0.28 版本的完全重构，在保持原有包体积不变的前提下，引入了多项重要改进和新特性。本文将深入解析这些变化，帮助开发者顺利升级应用。

核心变化

逻辑事件系统

1.0 版本新增了直接定义逻辑生命周期事件的能力：

kea({
  events: ({ actions }) => ({
    beforeMount: () => console.log('挂载前执行'),
    afterMount: () => console.log('挂载后执行'),
    beforeUnmount: () => console.log('卸载前执行'),
    afterUnmount: () => console.log('卸载后执行')
  })
})

这些事件以前只能通过插件定义，现在可以直接在逻辑中声明，大大简化了开发流程。

插件系统增强

1. 新增 afterPlugin 事件用于插件初始化
2. 支持为每个插件设置独立上下文
3. 新增逻辑级缓存变量 cache

const testPlugin = {
  events: {
    afterPlugin() {
      setPluginContext('pluginName', { someKey: 'value' });
    },
    afterBuild(logic) {
      logic.cache.tempData = getPluginContext('pluginName').someKey;
    }
  }
}

自动绑定的 Actions

从 1.0.0-rc.4 开始，logic.actions 会自动绑定 dispatch 功能：

const logic = kea({ actions: { doSomething: true } });

// 以下两种方式等效
logic.actions.doSomething();  // 自动dispatch
store.dispatch(logic.actionCreators.doSomething()); // 手动dispatch

注意：如果直接使用 logic.actions 的代码需要相应调整。

Selectors 和 Values 改进

1. Selectors 现在默认使用 store.getState()
2. 新增 logic.values 快捷访问方式

// 以下三种方式等效
logic.selectors.someValue(store.getState());
logic.selectors.someValue();
logic.values.someValue;  // 推荐方式

Hooks 支持

1.0 版本全面引入 React Hooks 支持：

function Component() {
  const { value } = useValues(logic);
  const { action } = useActions(logic);
  
  return <button onClick={action}>{value}</button>;
}

可用 Hooks 包括：

• useValues - 获取值（必须直接解构）
• useAllValues - 获取所有值为对象
• useActions - 获取动作
• useMountedLogic - 手动管理逻辑挂载
• useKea - 在组件内定义逻辑

延迟加载逻辑

1.0 版本改为延迟加载逻辑，仅在需要时（如组件挂载）才构建和挂载逻辑，并在不再需要时自动清理。

架构改进

上下文管理

1.0 版本引入新的上下文系统：

resetContext({
  plugins: [sagaPlugin],
  createStore: { /* Redux配置 */ }
});

function App() {
  const { store } = getContext();
  return <Provider store={store}>{/* ... */}</Provider>;
}

全插件化架构

Kea 核心现在完全基于插件系统构建，开发者可以：

1. 在构建流程的任何阶段插入功能
2. 定义自定义构建步骤
3. 监听各种 Kea 事件

带属性的逻辑构建

替代原来的 logic.withKey，现在可以直接传入 props 构建逻辑：

const logic = kea({
  key: props => props.id,
  reducers: ({ props }) => ({
    title: [props.title || '', { /* ... */ }]
  })
});

function Component({ id }) {
  const builtLogic = logic({ id });
  const { title } = useValues(builtLogic);
  // ...
}

默认值系统改进

多源默认值支持

现在可以从多种来源设置默认值：

kea({
  defaults: {
    name: 'default'
  },
  reducers: ({ selectors, props }) => ({
    name: [
      selectors.storedName || props.name || 'fallback',
      { /* ... */ }
    ]
  })
})

上下文级默认值

支持在全局上下文中设置默认值：

resetContext({
  defaults: {
    'scenes.home': {
      title: 'Welcome'
    }
  }
});

升级建议

1. 检查直接使用 logic.actions 的代码
2. 将 connect({ props: [] }) 更新为 connect({ values: [] })
3. 使用新的 Hooks API 替代部分 connect 用法
4. 重构插件代码以适应新的插件架构
5. 使用 logic(props) 替代 logic.withKey

总结

Kea 1.0 在保持 API 稳定性的同时，通过完全重构带来了更灵活的架构、更简洁的 API 和更好的性能表现。特别是 Hooks 支持和全插件化架构，为复杂应用开发提供了更多可能性。建议开发者充分利用这些新特性来构建更高效、更易维护的前端应用。

kea Production Ready State Management for React 项目地址: https://gitcode.com/gh_mirrors/ke/kea