From a2f0047d9e51d04ae762ec2194e766d4efd35a2e Mon Sep 17 00:00:00 2001 From: MagiMaster Date: Thu, 6 Feb 2020 17:38:31 -0800 Subject: [PATCH] Swap getDerived and shouldUpdate in lifecycle diagram (#255) Also add a note about their interaction to the API reference --- docs/api-reference.md | 5 +- docs/images/lifecycle.gv | 2 +- docs/images/lifecycle.svg | 215 +++++++++++++++++++++----------------- 3 files changed, 126 insertions(+), 96 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index a51216ca..f356bbea 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -608,4 +608,7 @@ end As with `setState`, you can set use the constant `Roact.None` to remove a field from the state. !!! note - `getDerivedStateFromProps` is a *static* lifecycle method. It does not have access to `self`, and must be a pure function. \ No newline at end of file + `getDerivedStateFromProps` is a *static* lifecycle method. It does not have access to `self`, and must be a pure function. + +!!! caution + `getDerivedStateFromProps` runs before `shouldUpdate` and any non-nil return will cause the state table to no longer be shallow-equal. This means that a `PureComponent` will rerender even if nothing actually changed. Similarly, any component implementing both `getDerivedStateFromProps` and `shouldUpdate` needs to do so in a way that takes this in to account. diff --git a/docs/images/lifecycle.gv b/docs/images/lifecycle.gv index 61c3d4e9..aff4b6f2 100644 --- a/docs/images/lifecycle.gv +++ b/docs/images/lifecycle.gv @@ -25,7 +25,7 @@ digraph G {

Roact.update >]; - update -> shouldUpdate -> getDerivedStateFromProps -> willUpdate -> render -> updated -> didUpdate; + update -> getDerivedStateFromProps -> shouldUpdate -> willUpdate -> render -> updated -> didUpdate; unmounted [style="rounded", color="#000000", label=<Instances Destroyed>]; unmount [style="rounded", color="#000000", label=< diff --git a/docs/images/lifecycle.svg b/docs/images/lifecycle.svg index 088c301d..f34335fe 100644 --- a/docs/images/lifecycle.svg +++ b/docs/images/lifecycle.svg @@ -1,151 +1,178 @@ - - - + + G - + -render1 - -render + +render1 + +render -created - -Instances Created + +created + +Instances Created -render1->created - - + +render1->created + + -didMount - -didMount + +didMount + +didMount -created->didMount - - + +created->didMount + + -mount - -Mounting -Roact.mount + +mount + +Mounting +Roact.mount -init - -init + +init + +init -mount->init - - + +mount->init + + -init->render1 - - + +init->render1 + + -updated - -Instances Updated + +updated + +Instances Updated -didUpdate - -didUpdate + +didUpdate + +didUpdate -updated->didUpdate - - + +updated->didUpdate + + -update - -Updating -Roact.update + +update + +Updating +Roact.update - -shouldUpdate - -shouldUpdate + + +getDerivedStateFromProps + +getDerivedStateFromProps - -update->shouldUpdate - - + + +update->getDerivedStateFromProps + + - -getDerivedStateFromProps - -getDerivedStateFromProps + + +shouldUpdate + +shouldUpdate - -shouldUpdate->getDerivedStateFromProps - - + + +getDerivedStateFromProps->shouldUpdate + + -willUpdate - -willUpdate + +willUpdate + +willUpdate - -getDerivedStateFromProps->willUpdate - - + + +shouldUpdate->willUpdate + + -render - -render + +render + +render -willUpdate->render - - + +willUpdate->render + + -render->updated - - + +render->updated + + -unmounted - -Instances Destroyed + +unmounted + +Instances Destroyed -unmount - -Unmounting -Roact.unmount + +unmount + +Unmounting +Roact.unmount -willUnmount - -willUnmount + +willUnmount + +willUnmount -unmount->willUnmount - - + +unmount->willUnmount + + -willUnmount->unmounted - - + +willUnmount->unmounted + +