javascript - How does react detect changes in stateprops? - Stack Overflow

admin管理员组

文章数量:1314039

JavaScript basically doesn't provide watchers for variables. So I wonder how React.js does it.

I'm trying to do the same thing. For objects and arrays, I can use Proxy, like this:

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;
    }
});

Maybe it's not a good idea. And I'm still don't know what to do with literals such as Numbers.

JavaScript basically doesn't provide watchers for variables. So I wonder how React.js does it.

I'm trying to do the same thing. For objects and arrays, I can use Proxy, like this:

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;
    }
});

Maybe it's not a good idea. And I'm still don't know what to do with literals such as Numbers.

• javascript
• reactjs

Share Improve this question Follow edited Jun 22, 2019 at 8:55 Gregory Orlov asked Jun 22, 2019 at 8:33 Gregory OrlovGregory Orlov 53722 gold badges77 silver badges1515 bronze badges 9

• 7 It doesn't, thats why you have to call setState. – tkausl Commented Jun 22, 2019 at 8:35
• 1 @tkausl, and what about props? – Gregory Orlov Commented Jun 22, 2019 at 8:40
• This sounds like a XY problem, could you maybe elaborate on what your overall goal is? – Tobias Tengler Commented Jun 22, 2019 at 8:45
• @tobias-tengler, I only want to console.log() when an object, array or literal changed – Gregory Orlov Commented Jun 22, 2019 at 8:53
• 3 @GregoryOrloff As mentioned reactjs is not watching your variables it (just speculating) shallowly pares the new state you pass into setState with the previous state and triggers a ponent re-render if the state updated. Maybe you should look into the source code of react, since I don't assume anyone here will have the time to explain the setState method to you in-depth... – Tobias Tengler Commented Jun 22, 2019 at 9:16

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 7

The TL/DR was already given in the ments: React does not watch the data, changes are always triggered from "the outside", which means setState. The state does not even have to change, calling setState with the same data again already triggers the lifecycle of the ponent.

However, if you use redux or some other state container, it can look as if ponents magically detect changes themself whenever the data used by mapStateToProps function changes. But react-redux's connect function merely wraps your ponent with a proxy that listens for events:

• register a listener for every redux action
• pare the current and previous state on every event using strict equal (===)
• if the state is different, call mapStateToProps
• pare the result of mapStateToProps with previous calls using strict equal
• if different, trigger a rerendering of the ponent

In order to imitate the behaviour, you would need some kind "thingsDidChange" listener which is triggered by events or continuous (setInterval) check.

本文标签： javascriptHow does react detect changes in statepropsStack Overflow