2

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

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

有没有办法让组件在 render 函数中使用 store 本身来监听 store 更改？

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);
4

1 回答 1

1

这个问题最终有两个问题：

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

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

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

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

于 2017-11-20T16:24:36.793 回答