| OLD | NEW |
| 1 Sky Widgets | 1 Sky Widgets |
| 2 =========== | 2 =========== |
| 3 | 3 |
| 4 Sky widgets are built using a functional-reactive framework, which takes | 4 Sky widgets are built using a functional-reactive framework, which takes |
| 5 inspiration from [React](http://facebook.github.io/react/). The central idea is | 5 inspiration from [React](http://facebook.github.io/react/). The central idea is |
| 6 that you build your UI out of components. Components describe what their view | 6 that you build your UI out of components. Components describe what their view |
| 7 should look like given their current configuration and state. When a component's | 7 should look like given their current configuration and state. When a component's |
| 8 state changes, the component rebuilds its description, which the framework diffs | 8 state changes, the component rebuilds its description, which the framework diffs |
| 9 against the previous description in order to determine the minial changes needed | 9 against the previous description in order to determine the minial changes needed |
| 10 in the underlying render tree to transition from one state to the next. | 10 in the underlying render tree to transition from one state to the next. |
| (...skipping 317 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 328 of `RenderObjects` that matches the description. When the framework calls | 328 of `RenderObjects` that matches the description. When the framework calls |
| 329 `build` again, the component still returns a fresh description of its | 329 `build` again, the component still returns a fresh description of its |
| 330 appearence, but this time the framework compares the new description with the | 330 appearence, but this time the framework compares the new description with the |
| 331 previous description and makes the minimal modifications to the underlying | 331 previous description and makes the minimal modifications to the underlying |
| 332 `RenderObjects` to make them match the new description. | 332 `RenderObjects` to make them match the new description. |
| 333 | 333 |
| 334 In this process, old stateless components are discarded and the new stateless | 334 In this process, old stateless components are discarded and the new stateless |
| 335 components created by the parent component are retained in the widget | 335 components created by the parent component are retained in the widget |
| 336 hierchy. Old _stateful_ components, however, cannot simply be discarded | 336 hierchy. Old _stateful_ components, however, cannot simply be discarded |
| 337 because they contain state that needs to be preserved. Instead, the old | 337 because they contain state that needs to be preserved. Instead, the old |
| 338 stateful components are retained in the widget hiearchy and asked to | 338 stateful components are retained in the widget hierarchy and asked to |
| 339 `syncFields` with the new instance of the component created by the parent in | 339 `syncFields` with the new instance of the component created by the parent in |
| 340 its `build` function. | 340 its `build` function. |
| 341 | 341 |
| 342 Without `syncFields`, the new values the parent component passed to the | 342 Without `syncFields`, the new values the parent component passed to the |
| 343 `MyDialog` constructor in the parent's `build` function would be lost because | 343 `MyDialog` constructor in the parent's `build` function would be lost because |
| 344 they would be stored only as member variables on the new instance of the | 344 they would be stored only as member variables on the new instance of the |
| 345 component, which is not retained in the component hiearchy. Therefore, the | 345 component, which is not retained in the component hiearchy. Therefore, the |
| 346 `syncFields` function in a component should update `this` to account for the | 346 `syncFields` function in a component should update `this` to account for the |
| 347 new values the parent passed to `source` because `source` is the authorative | 347 new values the parent passed to `source` because `source` is the authorative |
| 348 source of those values. | 348 source of those values. |
| (...skipping 30 matching lines...) Expand all Loading... |
| 379 instance into the widget heiarchy. (Instead of mounting later instances, the | 379 instance into the widget heiarchy. (Instead of mounting later instances, the |
| 380 framework passes them to the original instance in `syncFields` so that the first | 380 framework passes them to the original instance in `syncFields` so that the first |
| 381 instance of the component can incorporate the values passed by the parent to the | 381 instance of the component can incorporate the values passed by the parent to the |
| 382 component's constructor.) | 382 component's constructor.) |
| 383 | 383 |
| 384 Components often override `didUnmount` to release resources or to cancel | 384 Components often override `didUnmount` to release resources or to cancel |
| 385 subscriptions to event streams from outside the widget hierachy. When overriding | 385 subscriptions to event streams from outside the widget hierachy. When overriding |
| 386 either `didMount` or `didUnmount`, a component should call its superclass's | 386 either `didMount` or `didUnmount`, a component should call its superclass's |
| 387 `didMount` or `didUnmount` function. | 387 `didMount` or `didUnmount` function. |
| 388 | 388 |
| 389 initState |
| 390 --------- |
| 391 |
| 392 The framework calls the `initState` function on stateful components before |
| 393 building them. The default implementation of initState does nothing. If your |
| 394 component requires non-trivial work to initialize its state, you should |
| 395 override initState and do it there rather than doing it in the stateful |
| 396 component's constructor. If the component doesn't need to be built (for |
| 397 example, if it was constructed just to have its fields synchronized with |
| 398 an existing stateful component) you'll avoid unnecessary work. Also, some |
| 399 operations that involve interacting with the widget hierarchy cannot be |
| 400 done in a component's constructor. |
| 401 |
| 402 When overriding `initState`, a component should call its superclass's |
| 403 `initState` function. |
| 404 |
| 389 Keys | 405 Keys |
| 390 ---- | 406 ---- |
| 391 | 407 |
| 392 If a component requires fine-grained control over which widgets sync with each | 408 If a component requires fine-grained control over which widgets sync with each |
| 393 other, the component can assign keys to the widgets it builds. Without keys, the | 409 other, the component can assign keys to the widgets it builds. Without keys, the |
| 394 framework matches widgets in the current and previous build according to their | 410 framework matches widgets in the current and previous build according to their |
| 395 `runtimeType` and the order in which they appear. With keys, the framework | 411 `runtimeType` and the order in which they appear. With keys, the framework |
| 396 requires that the two widgets have the same `key` as well as the same | 412 requires that the two widgets have the same `key` as well as the same |
| 397 `runtimeType`. | 413 `runtimeType`. |
| 398 | 414 |
| (...skipping 14 matching lines...) Expand all Loading... |
| 413 | 429 |
| 414 Dependencies | 430 Dependencies |
| 415 ------------ | 431 ------------ |
| 416 | 432 |
| 417 * `package:vector_math` | 433 * `package:vector_math` |
| 418 * [`package:sky/animation`](../animation) | 434 * [`package:sky/animation`](../animation) |
| 419 * [`package:sky/base`](../base) | 435 * [`package:sky/base`](../base) |
| 420 * [`package:sky/painting`](../painting) | 436 * [`package:sky/painting`](../painting) |
| 421 * [`package:sky/rendering`](../rendering) | 437 * [`package:sky/rendering`](../rendering) |
| 422 * [`package:sky/theme`](../theme) | 438 * [`package:sky/theme`](../theme) |
| OLD | NEW |