Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(137)

Side by Side Diff: sky/sdk/lib/widgets/README.md

Issue 1189313002: Describe didMount and didUnmount in widgets/README.md (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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.
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698