Javascript 在MobX中，为什么渲染函数的副作用不好

最近有人问我：

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

我知道Mobx不允许这样做，这也不好，但我也知道你只需等待一点，就可以绕过Mobx的检查，例如：

Promise.resolve（）。然后（（）=>observable.value=“test”）

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

最后，我给出了一个相当糟糕的回答，只是告诉另一个程序员：

这很糟糕，相信我，别这么做，以后会出问题的

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

---

注意事项：

我特别感兴趣的是任何具体的代码示例，这些代码可能会因此而（意外地）失败

我创建了一个在渲染函数中改变Mobx状态的代码示例。每个组件在渲染时设置全局curPageName.value状态，并显示此变量，另一个组件也显示此变量。这相当可怕，但从技术上讲是可行的：

从“React”导入React；
从“react dom”导入react dom；
从“mobx”导入{observable}；
从“mobx react”导入{observer}；
设curPageName=可观察({
值：“测试”
});
常数测试=观察者（（）=>{
Promise.resolve（）。然后（（）=>（curPageName.value=“Test”）；
返回{curPageName.value}；
});
常量Test2=观察者（（）=>{
Promise.resolve（）。然后（（）=>（curPageName.value=“Test2”）；
返回{curPageName.value}；
});
@观察者
类主页扩展了React.Component{
状态={
页码：测试
};
render（）{
让Page=this.state.Page；
返回(
Cur-Page:{curPageName.value}
this.setState（{page:Test}}>Test
this.setState（{page:Test2}}>Test2
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）你真的不需要使用
Promise。当钩子存在的时候，你根本不需要解决问题。只需将
useffect
与空依赖项数组一起使用，它是专门为您的用例和副作用创建的。在使用类时，更习惯于使用
componentDidMount
生命周期方法，因为不能将钩子与类一起使用..我不知道
useffect
函数，这很值得了解。从内部useEffect触发其他组件进行渲染似乎是一种不好的做法，但写入document.title似乎是一个很好的用例。您实际上不需要使用
Promise。当挂钩存在时，根本不需要解决
问题。只需将
useffect
与空依赖项数组一起使用，它是专门为您的用例和副作用创建的。在使用类时，更习惯于使用
componentDidMount
生命周期方法，因为不能将钩子与类一起使用..我不知道
useffect
函数，这很值得了解。从useEffect内部触发其他组件进行渲染感觉不太好，但是写入document.title似乎是一个很好的用例。