Stencil.js如何实现UI与逻辑的关注点分离？

当前方案的核心缺陷 #

• 响应性完全断裂：你在connectedCallback中传入Service的是this.color的原始值拷贝，Service内部修改的是自身实例的color属性，和组件被@State修饰的color没有绑定关系，修改后不会触发组件重渲染，UI不会同步更新，你观察到简单场景可运行大概率是测试疏漏。
• 数据不同步：如果后续组件的color通过@Prop从外部传入更新，Service内部的color无法自动同步，会出现双向数据不一致的问题。
• 冗余维护成本：直接照搬Angular的Service模式没有利用Stencil自身的响应式能力，需要额外维护两套状态，不符合Stencil的设计规范。

推荐实现方案 #

Stencil 3+已经原生支持函数式组件与自定义Hook，完全可以实现你参考的React Hooks式关注点分离，也有官方轻量状态方案适配类组件场景，两种常用实现方式如下：

方案1：函数式组件 + 自定义Hook（和React分离思路完全对齐，官方首推） #

1. 抽离逻辑到自定义Hook

// useColorLogic.ts
import { useState } from '@stencil/core';

export const useColorLogic = (initialColor: string = 'blue') => {
  const [color, setColor] = useState(initialColor);

  const changeColorToRed = () => setColor('red');
  const changeColorToBlue = () => setColor('blue');

  return {
    color,
    changeColorToRed,
    changeColorToBlue
  };
};

2. 组件仅保留UI渲染逻辑

import { h, FunctionalComponent } from '@stencil/core';
import { useColorLogic } from './useColorLogic';

const MyAppComponent: FunctionalComponent = () => {
  const { color, changeColorToRed, changeColorToBlue } = useColorLogic('blue');
  
  return (
    <div>
      <button onClick={changeColorToRed}>Red</button>
      <button onClick={changeColorToBlue}>Blue</button>
      <p>Selection: {color}</p>
    </div>
  );
};

export default MyAppComponent;

这种方式不存在响应性问题，业务逻辑完全独立于UI，可复用性强，和你参考的React Hooks分离规范完全一致。

方案2：类组件 + @stencil/store（适配传统类组件开发场景） #

1. 抽离状态与逻辑到独立模块

// my-app-logic.ts
import { createStore } from '@stencil/store';

export const createColorLogic = (initialColor: string = 'blue') => {
  const { state, onChange } = createStore({
    color: initialColor
  });

  const changeColorToRed = () => {
    state.color = 'red';
  };

  const changeColorToBlue = () => {
    state.color = 'blue';
  };

  return {
    state,
    changeColorToRed,
    changeColorToBlue,
    onChange
  };
};

2. 类组件接入逻辑模块

import { Component, State, h } from '@stencil/core';
import { createColorLogic } from './my-app-logic';

@Component({
  tag: 'my-app-component'
})
export class MyAppComponent {
  private logic = createColorLogic('blue');
  @State() color: string = this.logic.state.color;

  connectedCallback() {
    // 监听逻辑层状态变化自动同步到组件State，触发重渲染
    this.logic.onChange('color', (newVal) => {
      this.color = newVal;
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.logic.changeColorToRed}>Red</button>
        <button onClick={this.logic.changeColorToBlue}>Blue</button>
        <p>Selection: {this.color}</p>
      </div>
    );
  }
}

现有方案兼容改造说明 #

如果你坚持使用类Service的写法，需要修改Service实现，把组件的状态更新方法传入Service，避免维护两套状态，修改后示例如下：

// MyAppService.ts
export default class MyAppService {
  private updateColor: (color: string) => void;

  constructor(updateColor: (color: string) => void, initialColor: string) {
    this.updateColor = updateColor;
    this.updateColor(initialColor);
  }

  changeColorToRed() {
    this.updateColor('red');
  }

  changeColorToBlue() {
    this.updateColor('blue');
  }
}

组件初始化逻辑调整为：

connectedCallback() {
  this.service = new MyAppService((val) => this.color = val, this.color); 
}

修改后即可保证响应性正常，但依然存在维护成本高的问题，不推荐作为首选方案。

内容的提问来源于stack exchange，提问作者Antonio Erdeljac