don't copy state anymore
This commit is contained in:
parent
40ff3c89b5
commit
cece44d4ac
4 changed files with 8 additions and 42 deletions
|
|
@ -77,31 +77,11 @@ To learn more about lifecycle methods, [see the lifecycle methods page](lifecycl
|
|||
|
||||
Like all virtual DOM nodes, component vnodes can have state. Component state is useful for supporting object-oriented architectures, for encapsulation and for separation of concerns.
|
||||
|
||||
The state of a component can be accessed three ways: as a blueprint at initialization, via `vnode.state` and via the `this` keyword in component methods.
|
||||
|
||||
#### At initialization
|
||||
|
||||
Any property attached to the component object is deep-cloned for every instance of the component. This allows simple state initialization.
|
||||
|
||||
In the example below, `data` is a property of the `Input` component's state object.
|
||||
|
||||
```javascript
|
||||
var ComponentWithInitialState = {
|
||||
data: "Initial content",
|
||||
view: function(vnode) {
|
||||
return m("div", vnode.state.data)
|
||||
}
|
||||
}
|
||||
|
||||
m(ComponentWithInitialState)
|
||||
|
||||
// Equivalent HTML
|
||||
// <div>Initial content</div>
|
||||
```
|
||||
The state of a component can be accessed two ways: via `vnode.state` and via the `this` keyword in component methods.
|
||||
|
||||
#### Via vnode.state
|
||||
|
||||
State can also be accessed via the `vnode.state` property, which is available to all lifecycle methods as well as the `view` method of a component.
|
||||
State can be accessed via the `vnode.state` property, which is available to all lifecycle methods as well as the `view` method of a component.
|
||||
|
||||
```javascript
|
||||
var ComponentWithDynamicState = {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
|
|||
var m = require("../../mithril")
|
||||
|
||||
var Editor = {
|
||||
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
|
||||
oninit: function() {
|
||||
this.data = "# Markdown Editor\n\nType on the left panel and see the result on the right panel"
|
||||
},
|
||||
view: function(vnode) {
|
||||
return [
|
||||
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),
|
||||
|
|
|
|||
|
|
@ -25,7 +25,9 @@ renderer.setEventCallback(run)
|
|||
var trust = require("../../render/trust")
|
||||
|
||||
var Editor = {
|
||||
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
|
||||
oninit: function() {
|
||||
this.data = "# Markdown Editor\n\nType on the left panel and see the result on the right panel"
|
||||
},
|
||||
view: function(vnode) {
|
||||
return [
|
||||
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),
|
||||
|
|
|
|||
|
|
@ -576,22 +576,4 @@ o.spec("component", function() {
|
|||
o(vnode.dom).notEquals(updated.dom)
|
||||
})
|
||||
})
|
||||
o.spec("state", function() {
|
||||
o("deep copies state", function() {
|
||||
var called = 0
|
||||
var component = {
|
||||
data: [{a: 1}],
|
||||
oninit: init,
|
||||
view: function() {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
render(root, [{tag: component}])
|
||||
|
||||
function init(vnode) {
|
||||
o(vnode.state.data).deepEquals([{a: 1}])
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue