High Order Components
React
High Order Function
A function that takes in a function as an argument, returns a function, or both.
f(g(x)) = g(x) => g'(x)
High Order Function
f(g(x)) = g(x) => g'(x)
g'(x) = g(h(x))
g'(x) = h(g(x))
Different ways to
Create React Component
React.createClass
Extending React.Component
Stateless Functional Component
Extending React.Component
Stateless Functional Component
Container and Presentational
React components typically contain a mix of
logic and presentation.
| Container | Presentational |
|---|---|
| 关心逻辑 | 关心视觉表现 |
| Render presentational components | Render the HTML markup (or other components) |
| Make API calls and manipulate data | Receive data from props |
| Define event handlers | Use event handlers from props |
| Written as classes | Often written as stateless functional components |
High Order Component
A component is a map from model to view.
Component = model => view
props + context
rendered component tree
High Order Component
f(g(x)) = g(x) => g'(x)
g'(x) = g(h(x)) : props proxy
g'(x) = h(g(x)) : render highjacking
component = model => view
g : component
x : model
g(x) : view
f : high oder component
Props Proxy
Render Highjacking
