Replies: 7 comments 1 reply
-
|
I've seen reactivity introduced this way before. It's interesting since it's polling. On one hand, this functions roughly the same as an approximation. This might help some people understand the most basic idea here. But it also only shows half the equation as it doesn't really show dependency tracking/subscriptions. That being said it's much less code to convey the idea than any attempt using the actual model. I got it down to about ~50 lines of code in my introduction to reactivity article and this comes in considerably less. |
Beta Was this translation helpful? Give feedback.
-
|
Is the idea of the function createSignal(initalValue) {
let currentValue = initalValue;
function getter() {
return currentValue;
}
function setter(element, nextValue) {
if (!element) return;
currentValue = nextValue;
element.innerText = currentValue;
}
return [getter, setter];
}
const [getCount, setCount] = createSignal(0);
const btn = window.btn;
const label = window.label;
label.innerText = getCount();
btn.onclick = () => setCount(label, getCount() + 1); |
Beta Was this translation helpful? Give feedback.
-
|
@pheianox |
Beta Was this translation helpful? Give feedback.
-
|
This article is my best reference (and the part 1 article) https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p |
Beta Was this translation helpful? Give feedback.
-
Thx, that's what I was looking for |
Beta Was this translation helpful? Give feedback.
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn"></button>
</body>
<script>
let queue =[]
function createSiginal(value){
let s={
observers:[],
value
}
function getSignal(){
if(queue.length){
s.observers.push(queue[0])
}
return s.value
}
function setSignal(nextValue){
s.value = nextValue
for(let i of s.observers){
i()
}
}
return[getSignal, setSignal]
}
function insert(el,fn){
queue.push(()=>el.innerText=fn())
for(let i of queue){
i()
}
queue=[]
}
const[getCount, setCount]=createSiginal(0)
let btn = document.getElementById('btn')
btn.onclick=()=>setCount(getCount()+1)
insert(btn,getCount)
</script>
</html>
```
I guess this would be much better than my first version |
Beta Was this translation helpful? Give feedback.
-
|
Yeah. It doesn't do cleanup so the signal's dependencies keep growing. Otherwise, that is more or less it. |
Beta Was this translation helpful? Give feedback.
-
|
I just realized the importance of queue (context). Actually it's one the most beautiful concepts in Solid |
Beta Was this translation helpful? Give feedback.
-
I just started using solid，
I read part of the source code，
I wonder if the above code can briefly describe the working principle of solid
Beta Was this translation helpful? Give feedback.
All reactions