仅在react组件呈现函数之外使用mobx存储

Question

我有一个react组件，它包装了一个类，这个类使用three.js和DOM呈现WebGL，并连接mobx存储值，它随类生命周期方法而变化。

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被设计为只在状态或道具数据更改时重新呈现。
• 第二，使用mobx-react，我非常肯定，关键是除非取消引用一个可观察到的值，否则组件不会重新呈现。

因此，虽然道具在技术上发生了变化，但React并没有对这些道具进行深入的对象比较。

您可以尝试将options设置为内部组件状态--这可能会强制重新呈现，即使render方法中没有任何更改。

这里要注意的是，更新的道具（来自您的存储）可能嵌套得太深，甚至在更新内部状态时也会强制React重新呈现。您可能还需要重新使用shouldComponentUpdate（）；