Question

当我在react-mobx中使用观察者功能时，我遇到了问题我的源代码如下，

import React from 'react';
import { observer } from 'mobx-react';

@observer
class Test extends React.Component{
  render(){
    const { student } = this.props; // it's @observable object

    return (
      <div>{student.name}</div>
    )
  }
}

当student对象发生变化时，此组件将重新呈现但我想控制何时重新渲染。

简而言之，我想抓住这个组件重新渲染的重点（这意味着student组件已更改）
它类似于shouldComponentUpdate 所以我以为我可以使用shouldComponentUpdate来控制。但它不起作用。

那我该如何控制呢？我想要的最终结果是，当student组件在重新渲染时具有特定参数时，我不想重新渲染。

Answer 1

要回答你的问题，通过猴子修补shouldComponentUpdate方法实际上有一种方法（非常hacky）：

@observer
class Test extends React.Component {

  constructor(props) {
    super(props);
    this.mobxShouldComponentUpdate = this.shouldComponentUpdate;
    this.shouldComponentUpdate = this.customShouldComponentUpdate;
  }

  customShouldComponentUpdate = (props, ...args) => {
    if (props.student === 'foo') {
      return false;
    }
    return this.mobxShouldComponentUpdate(props, ...args);
  }

  render(){
    const { student } = this.props; // it's @observable object
    return (
      <div>{student.name}</div>
    )
  }
}

尽管如此，这通常表明您正在以错误的方式考虑您的数据。理想情况下，您的组件应该只是应用程序当前状态的纯渲染函数。

class Test extends React.Component {
  render(){
    if (student.name === 'foo') {
      return <div>Custom info</div>
    }
    return (
      <div>{student.name}</div>
    )
  }
}

Answer 2

MWeststrate，MobX的开发者之一在帖子中说过这个。

无法自定义跟踪行为。整个想法是你不应该自己实现shouldComponentDidUpdate。 observer只会对在渲染的最后一次运行中实际使用的observable做出反应（因此不会对返回falsy的if语句后面的observable做出反应）。能够自定义这将允许您打破MobX的基本保证：视图始终与状态同步，并且不是理想的情况。

链接：https://github.com/mobxjs/mobx-react/issues/230

为什么要控制重新渲染，是不是可以推迟更新学生，或者在runInAction的帮助下立即执行所有更新？

我怎样才能控制mobx观察者呢？

2 个答案: