javascript - react 如何检测状态/ Prop 的变化？

Question

JavaScript 基本上不提供变量的观察者。
所以我想知道 React.js 是如何做到的。

我正在尝试做同样的事情。对于对象和数组，我可以使用 Proxy，如下所示:

let proxy = new Proxy(arr, {
    deleteProperty: function(target, property) {
        console.log("Deleted %s", property);
        return true;
    },
    set: function(target, property, value, receiver) {
        target[property] = value;
        console.log("Set %s to %o", property, value);
        return true;
    }
});

也许这不是一个好主意。而且我仍然不知道如何处理数字等文字。

Answer 1

TL/DR 已经在评论中给出:React 不监视数据，更改总是从“外部”触发，这意味着 setState .状态甚至不用改变，调用setState再次使用相同的数据已经触发了组件的生命周期。

但是，如果您使用 redux 或其他一些状态容器，它看起来好像组件会神奇地检测到 mapStateToProps 使用的数据时自己发生的变化。功能变化。但是 react-redux 的 connect函数只是用一个监听事件的代理包装你的组件:

为每个 redux 操作注册一个监听器

使用严格相等 (===)

比较每个事件的当前状态和先前状态

如果状态不同，请调用mapStateToProps

比较 mapStateToProps 的结果之前的调用使用严格相等

如果不同，则触发组件的重新渲染

为了模仿行为，您需要某种由事件或连续(setInterval)检查触发的“thingsDidChange”监听器。