| 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 325 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 336 components created by the parent component are retained in the widget | 336 components created by the parent component are retained in the widget |
| 337 hierchy. Old _stateful_ components, however, cannot simply be discarded | 337 hierchy. Old _stateful_ components, however, cannot simply be discarded |
| 338 because they contain state that needs to be preserved. Instead, the old | 338 because they contain state that needs to be preserved. Instead, the old |
| 339 stateful components are retained in the widget hiearchy and asked to | 339 stateful components are retained in the widget hiearchy and asked to |
| 340 `syncFields` with the new instance of the component created by the parent in | 340 `syncFields` with the new instance of the component created by the parent in |
| 341 its `build` function. | 341 its `build` function. |
| 342 | 342 |
| 343 Without `syncFields`, the new values the parent component passed to the | 343 Without `syncFields`, the new values the parent component passed to the |
| 344 `MyDialog` constructor in the parent's `build` function would be lost because | 344 `MyDialog` constructor in the parent's `build` function would be lost because |
| 345 they would be stored only as member variables on the new instance of the | 345 they would be stored only as member variables on the new instance of the |
| 346 component, which is not retained in the component hiearchy. Typically, the | 346 component, which is not retained in the component hiearchy. Therefore, the |
| 347 `syncFields` function in a component will copy the public member | 347 `syncFields` function in a component should update `this` to account for the |
| 348 variables from the `source` instance of the component to the retained | 348 new values the parent passed to `source` because `source` is the authorative |
| 349 instance of the component because, by convention, these public member | 349 source of those values. |
| 350 variables hold the values passed in by the parent component. | 350 |
| 351 By convention, components typically store the values they receive from their |
| 352 parents in public member variables and their own internal state in private |
| 353 member variables. Therefore, a typical `syncFields` implementation will copy |
| 354 the public, but not the private, member variables from `source`. When |
| 355 following this convention, there is no need to copy over the private member |
| 356 variables because those represent the internal state of the object and `this` |
| 357 is the authoritative source of that state. |
| 351 | 358 |
| 352 Finally, when the user taps on the "Save" button, `MyDialog` follows the same | 359 Finally, when the user taps on the "Save" button, `MyDialog` follows the same |
| 353 pattern as `MyCheckbox` and calls a function passed in by its parent component | 360 pattern as `MyCheckbox` and calls a function passed in by its parent component |
| 354 to return the final value of the checkbox up the hierarchy. | 361 to return the final value of the checkbox up the hierarchy. |
| 355 | 362 |
| 363 didMount and didUnmount |
| 364 ----------------------- |
| 365 |
| 366 When a component is inserted into the widget tree, the framework calls the |
| 367 `didMount` function on the component. When a component is removed from the |
| 368 widget tree, the framework calls the `didUnmount` function on the component. |
| 369 In some situations, a component that has been unmounted might again be mounted. |
| 370 For example, a stateful component might receive a pre-built component from its |
| 371 parent (similar to `child` from the `MyButton` example above) that the stateful |
| 372 component might incorporate, then not incorporate, and then later incorporate |
| 373 again in the widget tree it builds, according to its changing state. |
| 374 |
| 375 Typically, a stateful component will override `didMount` to initialize any |
| 376 non-trivial internal state. Initializing internal state in `didMount` is more |
| 377 efficient (and less error-prone) than initializing that state during the |
| 378 component's constructor because parent executes the component's constructor each |
| 379 time the parent rebuilds even though the framework mounts only the first |
| 380 instance into the widget heiarchy. (Instead of mounting later instances, the |
| 381 framework passes them to the original instance in `syncFields` so that the first |
| 382 instance of the component can incorporate the values passed by the parent to the |
| 383 component's constructor.) |
| 384 |
| 385 Components often override `didUnmount` to release resources or to cancel |
| 386 subscriptions to event streams from outside the widget hierachy. When overriding |
| 387 either `didMount` or `didUnmount`, a component should call its superclass's |
| 388 `didMount` or `didUnmount` function. |
| 389 |
| 356 Keys | 390 Keys |
| 357 ---- | 391 ---- |
| 358 | 392 |
| 359 If a component requires fine-grained control over which widgets sync with each | 393 If a component requires fine-grained control over which widgets sync with each |
| 360 other, the component can assign keys to the widgets it builds. Without keys, the | 394 other, the component can assign keys to the widgets it builds. Without keys, the |
| 361 framework matches widgets in the current and previous build according to their | 395 framework matches widgets in the current and previous build according to their |
| 362 `runtimeType` and the order in which they appear. With keys, the framework | 396 `runtimeType` and the order in which they appear. With keys, the framework |
| 363 requires that the two widgets have the same `key` as well as the same | 397 requires that the two widgets have the same `key` as well as the same |
| 364 `runtimeType`. | 398 `runtimeType`. |
| 365 | 399 |
| 366 Keys are most useful in components that build many instances of the same type of | 400 Keys are most useful in components that build many instances of the same type of |
| 367 widget. For example, consider an infinite list component that builds just enough | 401 widget. For example, consider an infinite list component that builds just enough |
| 368 copies of a particular widget to fill its visible region: | 402 copies of a particular widget to fill its visible region: |
| 369 | 403 |
| 370 * Without keys, the first entry in the current build would always sync with the | 404 * Without keys, the first entry in the current build would always sync with the |
| 371 first entry in the previous build, even if, semantically, the first entry in | 405 first entry in the previous build, even if, semantically, the first entry in |
| 372 the list just scrolled off screen and is no longer visible in the viewport. | 406 the list just scrolled off screen and is no longer visible in the viewport. |
| 373 | 407 |
| 374 * By assigning each entry in the list a "semantic" key, the infinite list can | 408 * By assigning each entry in the list a "semantic" key, the infinite list can |
| 375 be more efficient because the framework will sync entries with matching | 409 be more efficient because the framework will sync entries with matching |
| 376 semantic keys and therefore similiar (or identical) visual appearances. | 410 semantic keys and therefore similiar (or identical) visual appearances. |
| 377 Moreover, syncing the entries semantically means that state retained in | 411 Moreover, syncing the entries semantically means that state retained in |
| 378 stateful subcomponents will remain attached to the same semantic entry rather | 412 stateful subcomponents will remain attached to the same semantic entry rather |
| 379 than the entry in the same numerical position in the viewport. | 413 than the entry in the same numerical position in the viewport. |
| OLD | NEW |