仅在反应组件渲染功能之外使用 mobx 存储

Question

我有一个反应组件，它包装了一个 class，它使用 three.js 和 DOM 渲染 WebGL，并连接 mobx 存储值，它随着 class 生命周期而变化方法。

传入的 mobx 存储仅在生命周期函数中的组件渲染函数之外使用 (componentDidMount, componentDidUpdate, ..)。请注意，当商店更改时，组件不会触发重新渲染。但是我在渲染函数中进行了无用的读取，例如在下面的示例中将 triggerRerenderListenerProp={this.props.store.debugSettings.showStats} 道具传递给 div，该组件仅在 store.debugSettings.showStats 更改时变为活动状态。

有没有办法让组件在渲染函数中不使用存储本身来监听存储更改？

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {observer} from 'mobx-react';

import MapPreview from 'classes/MapPreview';

import style from './Preview.css';

class Preview extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    imageUrl: PropTypes.string.isRequired
  };

  constructor (props) {
    super(props);

    this.containerEl = null;
  }

  componentDidMount () {
    const options = {
      debugSettings: this.props.store.debugSettings,
      previewSettings: this.props.store.previewSettings
    };

    this.preview = new MapPreview(this.containerEl, options);
    this.preview.setImage(imageUrl);
  }

  componentDidUpdate () {
    this.preview.updateOptions({
      debugSettings: this.props.store.debugSettings,
      previewSettings: this.props.store.previewSettings
    });
  }

  render () {
    return (
      <div
        className={style.normal}
        ref={(el) => { this.containerEl = el; }}
        triggerRerenderListenerProp={this.props.store.debugSettings.showStats}
      />
    );
  }
}

export default observer(Preview);

Answer 1

问题最终有两个问题：

第一，React 被设计为仅在状态或 prop 数据更改时重新渲染。
第二，mobx-react，我很确定重点是除非您取消引用可观察值，否则组件不会重新呈现。

因此，虽然您的 props 在技术上发生了变化，但 React 不会对道具进行深入的对象比较。

您可能会尝试将 options 设置为内部组件状态 - 可能强制重新渲染，即使渲染方法中的任何内容都没有改变。

这里需要注意的是，更新的 props（来自您的商店）可能嵌套太深，以至于即使在更新内部状态时也无法强制 React 重新渲染。您可能还需要借助 shouldComponentUpdate();

仅在反应组件渲染功能之外使用 mobx 存储

Using mobx store only outside of the react components render function

javascript

reactjs

mobx

mobx-react

mobx-state-tree