react底层是如何实现对this.state监听的

Question

如题，谢谢解答

---

可能没有问清楚
this.state的数据变化时，是如何触发组件更新的。react是如何知道数据变化了

Answer 1

1L 说的是对的，因为所有对于state的修改，全部都是通过setState方法进行的。

• 怎样算是一个react组件，继承React.Component
• 继承React.Component做了什么？React.Compnent包含了setState的方法
• setState的方法有什么用，通过setState控制维护了一个组件的state，所有想要修改state的操作，必须通过这个方法。

如果你想知道数据变化了，监听数据的变化？那你需要从数据的根源做起，mobx就是监听数据的变化，可以去看看源码。

function makePropertyObservableReference(propName) {
            let valueHolder = this[propName]
            const atom = new Atom("reactive " + propName)
            Object.defineProperty(this, propName, {
                configurable: true,
                enumerable: true,
                get: function() {
                    atom.reportObserved()
                    return valueHolder
                },
                set: function set(v) {
                    if (!isForcingUpdate && isObjectShallowModified(valueHolder, v)) {
                        valueHolder = v
                        skipRender = true
                        atom.reportChanged()
                        skipRender = false
                    } else {
                        valueHolder = v
                    }
                }
            })
        }

Answer 2

react是如何知道数据变化了

它不知道，所以才叫你用 setState 。

Answer 3

原理其实很简单，不存在监听。

React规定了所有的state的改变都必须要通过setState方法，不然的话无法触发React自身完整的更新机制。所以很简单，只要在setState方法里写上所有的对应更新机制或者触发其它的生命周期就可以了。