React Native、MobX 和生命周期

Question

我在 React Native 中使用 MobX，到目前为止，我真的很精简它。当 Mobx 存储中的状态发生更改时，是否有一些生命周期或方法来调用函数？

Answer 1

componentWillReceiveProps可以在组件级别使用。例如，观察者容器将通过 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例如。"你好世界">，它将由通知组件显示。

如果你想要更直接的方法，那么你只需注入组件和存储并观察变化。基本上你的TypeScript界面应该看起来像这样：

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

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

希望我解释得足够清楚。

Answer 2

您可以在componentDidMount中放置一个自动运行并将其处置在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")
);