mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
Merge reactive scope refactor
This commit is contained in:
parent
0e439f084f
commit
efc4798ddb
48 changed files with 2750 additions and 1949 deletions
76
docs/tut/crash-course/6-derived-source.md
Normal file
76
docs/tut/crash-course/6-derived-source.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
# Derived Source
|
||||
|
||||
You can create new sources from existing sources. This is known as *deriving
|
||||
sources*.
|
||||
|
||||
A function that wraps a source effectively becomes a new source. If a source
|
||||
used inside a function is updated, the whole function can be re-ran to recompute
|
||||
its value.
|
||||
|
||||
```lua
|
||||
local vide = require(vide)
|
||||
local source = vide.source
|
||||
|
||||
local function Counter()
|
||||
local count = source(0)
|
||||
|
||||
local function doubled()
|
||||
return count() * 2
|
||||
end
|
||||
|
||||
return create "TextButton" {
|
||||
Position = UDim2.fromOffset(300, 300),
|
||||
Size = UDim2.fromOffset(200, 50),
|
||||
|
||||
Text = doubled,
|
||||
|
||||
Activated = function()
|
||||
count(count() + 1)
|
||||
end
|
||||
}
|
||||
end
|
||||
|
||||
mount(function() return create "ScreenGui" { Counter {} } end, game.StarterGui)
|
||||
```
|
||||
|
||||
Now the counter will increment in 2s each time it is clicked.
|
||||
|
||||
Sometimes when using expensive computations to derive state, you only want to
|
||||
recalculate it once when a source state has changed. Although not needed in
|
||||
most cases, you can use `derive()` to create a new source that will cache its
|
||||
value, only recomputing when an input source has changed.
|
||||
|
||||
```lua
|
||||
local vide = require(vide)
|
||||
local source = vide.source
|
||||
local derive = vide.derive
|
||||
|
||||
local function Counter()
|
||||
local count = source(0)
|
||||
|
||||
local factorial = derive(function()
|
||||
local n = 1
|
||||
for i = 2, count() do
|
||||
n *= i
|
||||
end
|
||||
return n
|
||||
end)
|
||||
|
||||
return create "TextButton" {
|
||||
Position = UDim2.fromOffset(300, 300),
|
||||
Size = UDim2.fromOffset(200, 50),
|
||||
|
||||
Text = function()
|
||||
return factorial() + factorial() + factorial()
|
||||
end,
|
||||
|
||||
Activated = function()
|
||||
count(count() + 1)
|
||||
end
|
||||
}
|
||||
end
|
||||
```
|
||||
|
||||
This can improve performance in cases where a source is read from multiple times
|
||||
between recalculations. In the above example, the factorial is only ever
|
||||
calculated once each time the count changes.
|
||||
Loading…
Add table
Add a link
Reference in a new issue