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

Question

React 真的很难T_T.....

我只想在状态发生变化时调用一个组件方法。我可以使用 Vue 中的 watcher 轻松完成此操作。但是我应该在 React class 组件和 MobX 的自动运行中做什么？这会在功能组件中起作用吗？

import someStore 

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

Answer 1

我已经为您制作了 2 个示例，一个带有 class 组件，这不再是推荐的做事方式，另一个带有功能组件。

示例已升级，因为在渲染中计算我们的 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>;
});

这是我们的 class 组件，现在我们使用 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 实际上是一个超级简单的库 :)

Codesandbox：https://codesandbox.io/s/httpsWhosebugcomquestions66602050-7uhm6

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

MobX autorun not working class component constructor

reactjs

mobx

mobx-react