https://courses.reacttraining.com/courses/advanced-react-free
-
Imperative vs. Declarative, "extending" React
Making use of react lifecycle to make declarative API (from imperative lib). non-dom, nothing-to-render component. e.g.<Sound />
,<Tone />
,<D3 />
- nice: declarative > imperative.
- maybe? component tree with non-DOM component. e.g.
sound(LifeCycleComponent, {isPlaying, pitch, frequency})
-
Implicit State with Compound Components and cloneElement
Making use ofReact.Children.map
to inject props to children,- nice: better absctraction/separation
- maybe? adding more codes to maintain, e.g.
const Tabs = //composable hoc..
. secondly, more coupling between hierarchies.
-
Implicit State with Compound Components and Context Making use of
context
to inject child props- nice: regardless of component structure/hierarchy
- maybe? it's implicit, and context thoughout the component subtree. remix-run/react-router#5076 (comment)
-
Explicit State with Higher Order Components
- nice: composable component creation
- maybe? adding layers of components/structure. e.g.
composePropsProvider(withMedia, withMoreProps)
-
Explicit State with Render Props
- nice: cleaner syntax
- maybe? a bit magical for
<ScrollY>{ y => <header top={y} /> }</ScrollY>
-
Controlled Custom Components
- nice: clear(one way) state management
- maybe? strict