React组件中ListService实例引发数组不更新的原因及设计模式疑问

1. Service实例重复创建导致状态重置：如果你在函数组件内部每次渲染时都重新实例化ListService，那每次点击按钮都会用一个全新的Service实例——它内部的数组永远是初始的['Item 1','Item 2','Item 3']。首次点击能得到Item 4，但组件重新渲染后又会生成新的Service实例，下次点击还是基于初始数组添加，结果自然还是Item 4，看起来就像是在覆盖。

2. 非响应式状态未触发React更新：如果Service内部维护的数组没有和React的useState绑定，或者修改数组后没有传递新的数组引用给setItems（比如直接修改原数组后传同一个引用），React的浅比较会认为状态没变化，不会触发组件重渲染，界面就不会更新。当然如果Service的addItem方法逻辑写错了（比如不是push而是替换最后一项）也会出问题，但结合你的描述，前者概率更大。

React完全支持职责分离设计模式，只是得遵循它的响应式规则：

• 确保Service实例唯一：用useRef存储Service实例，保证组件生命周期内只创建一次：

  const serviceRef = useRef(new ListService());
  const service = serviceRef.current;
  

• 同步Service操作到React状态：Service修改数组后，要把新数组（或新引用）传给setItems触发更新。比如让addItem返回新数组（保持不可变性）：

  class ListService {
    constructor() {
      this.items = ['Item 1', 'Item 2', 'Item 3'];
    }
    addItem() {
      this.items = [...this.items, `Item ${this.items.length + 1}`];
      return this.items;
    }
  }
  

  组件点击事件里：

  const handleAdd = () => {
    const newItems = service.addItem();
    setItems(newItems);
  };
  

• 也可以让React完全管理状态：Service只提供纯函数式的操作逻辑，不维护自身状态，所有状态交给useState：

  class ListService {
    static addItem(items) {
      return [...items, `Item ${items.length + 1}`];
    }
  }
  

  组件中：

  const handleAdd = () => {
    setItems(prevItems => ListService.addItem(prevItems));
  };
  

这样既实现了逻辑与UI的分离，又符合React的响应式机制，不会出现状态不更新的问题。

内容的提问来源于stack exchange，提问作者Sudo Sur