Question

我有一个react组件，它包含一个类，它使用带有DOM的three.js呈现WebGL并连接mobx存储值，并随着类生命周期方法而改变。

传入的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旨在仅在状态或道具数据发生变化时重新渲染。
两个，mobx-react，我非常清楚，除非你取消引用一个可观察的值，否则组件不会重新渲染。

因此，当您的props在技术上发生变化时，React不会对道具进行深层对象比较。

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

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

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

1 个答案: