Question

我在React Native中使用MobX，到目前为止我真的很喜欢它。当Mobx Store中的状态发生变化时，是否有一些生命周期或方法来调用函数？

Answer 1

componentWillReceiveProps可以在组件级别使用。例如，observer容器将通过props（TypeScript中的虚构用例）通知实际组件：

@inject('notificationStore')
@observer
class SomeContainer extends Component<Props> {
  ...

  public render(): JSX.Element {
    <Notification
      message={this.props.notificationStore.message}
      ...
    />
  }
}

在通知中：

class Notification extends PureComponent<Props> {
  ...
  public componentWillReceiveProps(nextProps: any): void {
    Alert.alert('message', nextProps.message);
  }
}

现在，当你改变notificationStore.message时，例如。 'Hello world'，它将由Notification组件显示。

如果您想要更直接的方法，那么您只需将组件注入存储并观察更改。基本上你的TypeScript接口应如下所示：

interface Props {
  notificationStore?: any;
  ...
}

如您所见，存储始终被视为支柱，这意味着该突变将触发componentWillReceiveProps生命周期事件。

希望我能够清楚地解释这一点。

Answer 2

您可以在componentDidMount中加autorun并将其置于componentWillUnmount：

示例（JSBin）

const store = observable({
  data: "data"
});

setTimeout(() => {
  store.data += " updated!";
}, 2000);

@observer
class App extends Component {
  componentDidMount() {
    this.disposer = autorun(() => {
      console.log(`Data changed: ${this.props.store.data}`);
    });
  }

  componentWillUnmount() {
    this.disposer();
  }

  render() {
    return <h1>{this.props.store.data}</h1>;
  }
};

ReactDOM.render(
  <App store={store} />,
  document.getElementById("app")
);

React Native，MobX和生命周期

2 个答案: