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”侦听器。

反应如何检测状态/道具的变化？

1 个答案: