在 React 中对模型使用常规 Javascript 类

Question

是否可以在使用 React 的模型（在 MVC 范例中）中使用传统的 Javascript 类而不是使用似乎会破坏可重用性的 Redux 或上下文和缩减器？如果是这样，我们如何才能有效地 'subscribe' 更改这些对象中的数据的操作，以便有效地呈现视图（即 React 组件）？

Answer 1

订阅逻辑由您自己弄清楚。 React 不提供任何可以在其他类中“借用”的机制。但是 Javascript 中的面向事件编程当然不是什么新鲜事。所以像模式这样的事件发射器会起作用。所以这是一个例子（未经测试，但它应该给你一个想法）：

class MyClass {

  data = {};

  constructor(onTick) {
    setInterval(() => {
      const now = new Date();
      this.data.time = now;
      this.data.tillChristmas = (new Date('2021-12-25')) - now;
      onTick && onTick(this);
    }, 10 * 1e3);
  }
}

const MyComp = () => {

  const [data, setData] = useState({});
  useEffect(() => {
      new MyClass(myclass => {
        setData(myclass.data);
      });
    }, []);

  return <pre>
    {JSON.stringify(data, true, 2)}
  </pre>;
  // of course, you could present the data in more interesting ways, too.
};

在 React 中对模型使用常规 Javascript 类

use of conventional Javascript classes for models in React

javascript

oop

typescript

reactjs