MobX 自动运行不工作类组件构造函数

如何解决MobX 自动运行不工作类组件构造函数

React 实际上是难以置信的难 T_T....

我只想在状态发生变化时调用组件方法。我可以使用 Vue 中的观察者轻松做到这一点。但是我应该在 React 类组件和 MobX 的自动运行中做什么？这会在功能组件中工作吗？

import someStore 

@observer
class MyComponent {
    constructor(){
       autorun( 
         // references someStore.someObservable
         // call component methods 
         // but this isn't hit when there's change
        )
    }
}

解决方法

我为您制作了 2 个示例，一个是类组件，不再推荐使用这种方式来做事，另一个是功能组件。

示例相当升级，因为在渲染中计算我们的 status 会容易得多，但让我们假设我们不能这样做并且我们想要调用一些内部方法。

首先，我们设置存储并每秒更新一次：

import { observable,reaction } from 'mobx';
import { observer } from 'mobx-react';
import React,{ useEffect,useState } from 'react';

const store = observable({
  counter: 0
});

setInterval(() => {
  store.counter++;
},1000);

// Helper method
const getStatus = (number) => (number % 2 === 0 ? 'even' : 'odd');

这是我们的功能组件，我们使用 useEffect 对计数器更改做出反应，然后使用 setStatus 方法更新我们的内部状态：

const CounterFunctional = observer(() => {
  const [status,setStatus] = useState(() => getStatus(store.counter));

  useEffect(() => {
    setStatus(getStatus(store.counter));
  },[store.counter]);

  return <div>functional: {status}</div>;
});

这是我们的类组件，现在我们使用 MobX reaction（不要忘记在卸载时处理它）并在 counter 更改后类似地更新我们的内部状态：

const CounterClass = observer(
  class extends React.Component {
    disposer;

    constructor() {
      super();

      this.state = {
        status: getStatus(store.counter)
      };
    }

    componentDidMount() {
      this.disposer = reaction(
        () => store.counter,() => {
          this.setState({
            status: getStatus(store.counter)
          });
        }
      );
    }

    componentWillUnmount() {
      this.disposer();
    }

    render() {
      return <div>class: {this.state.status}</div>;
    }
  }
);

希望它是有道理的，React 实际上是一个超级简单的库 :)

代码沙盒：https://codesandbox.io/s/httpsstackoverflowcomquestions66602050-7uhm6