Javascript 为什么在react组件中更改mobx可观察状态变量并不像react中那样引发不变的冲突错误

为什么在react组件中更改mobx可观察状态变量并不像react中那样引发不变的冲突错误

案例1： 但是，下面的代码段也应该抛出相同的错误，对吗？但事实并非如此

案例2：

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.

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

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

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: Counter@259.count