Comments (6)
Hi! Yeah that post is a bit outdated, I will update or remove it. This one gives you a clearer overview, but it is written for React Easy State. I think it still explains the reactivity.
Everything happens at runtime and observers are only executed when a value - they use - changes. The Observer Util saves and queries (object, property, reaction) relations. These are enough to schedule a reaction for re-run when a property of an object (observable) - used inside the reaction - changes.
The currently running reaction is saved in a global flag (observe
is responsible for this). Accessed or mutated object properties are tracked by ES6 Proxies (courtesy of observable
). I hope this helped a bit, the article I linked at the beginning does a better job 🙂
from observer-util.
If I understand it correctly, it only works in connection with render
method - on first call the list of used observables is created and this information is used later to call render
method again (rerender).
Then it raises a question - what if there is an observable not detected during the first call of render
method because there is if
condition or a more complicated logic?
from observer-util.
Every run of the reactions are observed, not just the first one. The relations are totally wiped before every run of the render and then reconstructed during the run. The reactive wiring of conditional branches - hidden by if
or a loop for example - are dynamically teared down and rediscovered. This might seem like an expensive thing, but in reality it was the fastest solution.
Also the post is a bit misleading. It pretends like React Easy State is doing the heavy lifting to lower the mental overhead. In reality this library (Observer Util) has nothing to do with React, it just has a tiny React port. Any function can be a reaction, not just React renders.
from observer-util.
So, on each run, the list of observables whose values were used is created and then whenever a value from this list is changed, something happens (component is rerendered, etc.). When there's an observable hidden by if
then when the if
input changes, the observable is "discovered".
Still, I am wondering how the list of observables used in the function is created, when the function is not called.
This is the example on the main page of the project
import { observable, observe } from '@nx-js/observer-util'
const counter = observable({ num: 0 })
const countLogger = observe(() => console.log(counter.num))
// this calls countLogger and logs 1
counter.num++
How the list is "inferred" from observe(() => console.log(counter.num))
?
Thanks (I might be still missing something).
from observer-util.
Reactions are executed once synchronously right after they are passed to observe
. This is controlled by the lazy
option of observe. You can read more about it in this docs section.
Sorry for hiding this so badly 😄 In the last version this fact was more apparent from the docs, I will move this info to a more visible place.
from observer-util.
I see, now I understand that. Thanks.
Can I suggest to rename that method to something like observerAndTrigger
which will make the functionality more obvious?
from observer-util.
Related Issues (20)
- Mutating observables in reactions is forbidden HOT 2
- 4.2.0 broke something HOT 3
- Trap "toJSON" to allow serialization of proxies HOT 2
- Deeply observe object HOT 12
- Documentation suggestion HOT 2
- Is it possible to receive the type of change when observing a value? HOT 9
- Observables arrays don't appear to observe correctly HOT 3
- Question about scheduler batching and observe optimizations. HOT 2
- Problem when changing whole objects HOT 1
- Understanding reactions HOT 1
- Angular 7 Integration HOT 1
- Not sure I'm understanding this at all HOT 4
- Object.defineProperty should trigger reactions HOT 3
- computed properties no cache? HOT 3
- Observing through a Proxy HOT 2
- `construct` trap fails for observed constructors HOT 1
- Bug or user error? Copying observable to other position in array converts it to the raw item
- should observe explicit array length changes
- Shallow observing HOT 1
- rawToProxy WeakMap.set is never called
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from observer-util.