在MobX中，为什么渲染功能中的副作用不好呢？

Question

最近有人问我。

为什么我不能在渲染函数中写入mobx状态？

我知道Mobx不允许这样做，而且这样做也不好，但是我也知道你可以通过简单的等待来绕过Mobx的检查，比如说。Promise.resolve().then(() => observable.value = "test").

在其他框架中，当程序员在功能函数（类似渲染的函数）中造成副作用时，我有过调试代码的糟糕经历。然而，我的大多数糟糕的经验涉及到真正复杂的bug，我仍然没有完全理解，所以我无法得出一个简单的解释，为什么这是不好的。

最后我给出了一个相当糟糕的答案，只是告诉其他程序员。

"这很糟糕，相信我，不要尝试这样做，这会导致以后的问题

对于 "为什么我不能在渲染函数中写入mobx状态 "这个问题，有什么更好的答案？

---

注意。

我特别感兴趣的是任何具体的例子，这些例子会导致代码失败（意外）。

我创建了一个在渲染函数中突变Mobx状态的代码示例。每个组件在渲染时设置全局的curPageName.value状态，并显示这个变量，不同的组件也会显示这个变量。这是相当可怕的，但技术上是可行的。https:/codesandbox.iosmobx-playground-u8per?file=srcindex.js。

import React from "react";
import ReactDOM from "react-dom";

import { observable } from "mobx";
import { observer } from "mobx-react";

let curPageName = observable({
  value: "test"
});

const Test = observer(() => {
  Promise.resolve().then(() => (curPageName.value = "Test"));
  return <div>{curPageName.value}</div>;
});
const Test2 = observer(() => {
  Promise.resolve().then(() => (curPageName.value = "Test2"));
  return <div>{curPageName.value}</div>;
});

@observer
class MainPage extends React.Component {
  state = {
    page: Test
  };
  render() {
    let Page = this.state.page;
    return (
      <React.Fragment>
        <div>Cur Page: {curPageName.value}</div>
        <div>
          <button onClick={() => this.setState({ page: Test })}>Test</button>
        </div>
        <div>
          <button onClick={() => this.setState({ page: Test2 })}>Test2</button>
        </div>
        <Page />
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MainPage />, rootElement);