Почему изменение наблюдаемой переменной состояния mobx внутри рендеринга компонента реакции не вызывает ошибку нарушения инварианта, как в реакции - PullRequest
Новая
       82

Почему изменение наблюдаемой переменной состояния mobx внутри рендеринга компонента реакции не вызывает ошибку нарушения инварианта, как в реакции

1 голос
/ 06 мая 2020

Почему изменение наблюдаемой переменной состояния mobx внутри рендеринга компонента реакции не вызывает ошибку нарушения инварианта, как в реакции

Случай 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: Counter@259.count
...