为什么在React组件渲染中更改Mobx可观察到的状态变量不会像在react中那样抛出不变的违规错误

Question

为什么在React组件渲染中更改Mobx可观察的状态变量不会像在react中那样抛出不变的违反错误

案例1：

import React, { Component } from "react";
import { render } from "react-dom";

class Counter extends React.Component {
  state = {
    count: 0
  };
  render() {
    this.setState({
      count: this.state.count + 1
    });
    console.log("hi");
    return (
      <div>
        <p>{this.count}</p>
      </div>
    );
  }
}

render(
  <Counter/>,
  document.getElementById("root")
);

上面的代码片段按预期抛出错误：

Invariant Violation
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

但是下面的代码片段也应该抛出相同的错误，对吗？但实际上不是。

案例2：

import React, { Component } from "react";
import { render } from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";


@observer
class Counter extends React.Component {
  @observable count = 0;

  render() {
    this.count = this.count + 1 
    return (
      <div>
        <p>{this.count}</p>
      </div>
    );
  }
}

render(
  <Counter/>,
  document.getElementById("root")
);

对此案例有解释吗？

案例3：

import React, { Component } from "react";
import { render } from "react-dom";
import { observable } from "mobx";
import { observer } from "mobx-react";


@observer
class Counter extends React.Component {
  @observable count = 0;

  changeCount = () => {
    this.count = this.count + 1 
  }
  render() {
    this.count = this.count + 1 
    return (
      <div onClick={this.changeCount}>
        <p>{this.count}</p>
      </div>
    );
  }
}

render(
  <Counter/>,
  document.getElementById("root")
);

这不会在初始渲染时引发错误但是当我们点击计数器div

时，它将引发错误。

Error
[mobx] Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: [email protected]

也对此有任何解释吗？

Answer 1

[不同于React在状态改变时触发重新渲染，mobx可观察对象不会触发重新渲染，相反，它们只是在使用它们的地方专门触发更新

例如，在第一种情况下，您将一次又一次调用render方法。但是在第二种情况下，它将仅被调用一次。