简单粗暴，在mobx中取代state，改用@observable引入可观察属性

Posted 2022-03-02 openglnewbee

http://cn.mobx.js.org/refguide/observer-component.html

可观察的局部组件状态

就像普通类一样，你可以通过使用 @observable 装饰器在React组件上引入可观察属性。 这意味着你可以在组件中拥有功能同样强大的本地状态(local state)，而不需要通过 React 的冗长和强制性的 setState 机制来管理。 响应式状态会被 render 提取调用，但不会调用其它 React 的生命周期方法，除了 componentWillUpdate 和 componentDidUpdate 。 如果你需要用到其他 React 生命周期方法 ，只需使用基于 state 的常规 React API 即可。

上面的例子还可以这样写:

import observer from "mobx-react"

import observable from "mobx"

@observer class Timer extends React.Component 
    @observable secondsPassed = 0

    componentWillMount() 
        setInterval(() => 
            this.secondsPassed++
        , 1000)
    

    render() 
        return (<span>Seconds passed:  this.secondsPassed  </span> )
    


ReactDOM.render(<Timer />, document.body)
Copy

对于使用可观察的局部组件状态更多的优势，请参见为什么我不再使用 setState 的三个理由。