|
43 | 43 | http://rea.tech/reactjs-real-world-examples-of-higher-order-components/
|
44 | 44 | Explanations and examples of HOCs and their uses
|
45 | 45 |
|
46 |
| -- **Functions as Child Components and Higher Order Components** |
47 |
| - http://rea.tech/functions-as-child-components-and-higher-order-components/ |
48 |
| - Comparisons and examples for these two component patterns |
49 |
| - |
50 | 46 | - **ReactCasts: Higher Order Components**
|
51 | 47 | https://youtu.be/LTunyI2Oyzw
|
52 | 48 | A screencast that walks through the idea and usage of Higher Order Components
|
|
71 | 67 | https://daveceddia.com/extract-state-with-higher-order-components/
|
72 | 68 | An easy-to-read explanation of how HOCs work, and examples of how to extract common logic into a reusable HOC
|
73 | 69 |
|
74 |
| -- **Simplifying life with React render callbacks** |
75 |
| - https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 |
76 |
| - An overview of several different ways to wrap up components, including cloning children, HOCs, and render callbacks. |
77 |
| - |
78 | 70 | - **Why you should keep your React components pure by using HOCs**
|
79 | 71 | https://medium.com/@DjamelH/why-you-should-keep-your-react-components-pure-by-using-hocs-67e5c7f80c81
|
80 | 72 | Walks through extracting stateful behavior into an HOC so that it's more reusable and the wrapped components are simpler.
|
|
91 | 83 | http://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/
|
92 | 84 | A short, easy-to-read explanation of the basic concepts and examples of HOCs.
|
93 | 85 |
|
94 |
| -- **"HOCs vs render callbacks / function-as-child"** |
95 |
| - https://twitter.com/mjackson/status/890725796117176321 |
96 |
| - https://twitter.com/acdlite/status/890727843302301700 |
97 |
| - A short but interesting Twitter thread with some comments from Michael Jackson, Andrew Clark, and others, on the mental differences between using HOCs and render callbacks. |
98 |
| - |
99 | 86 | - **Real World Higher-Order Components**
|
100 | 87 | http://blog.jakoblind.no/real-world-higher-order-components-hocs/
|
101 | 88 | Several useful examples of actual HOCs, such as adding a hidden prop, providing toggle functionality, and only showing a component if a feature flag is turned on.
|
|
154 | 141 | - **Destroy All Classes: Turn React Components Inside Out with Functional Programming**
|
155 | 142 | https://www.bignerdranch.com/blog/destroy-all-classes-turn-react-components-inside-out-with-functional-programming/
|
156 | 143 | Demonstrates progressively refactoring a class component with logic into separate functional components, and then tying them together with Recompose
|
| 144 | + |
| 145 | + |
| 146 | +#### Comparing Composition Approaches |
| 147 | + |
| 148 | +- **Functions as Child Components and Higher Order Components** |
| 149 | + http://rea.tech/functions-as-child-components-and-higher-order-components/ |
| 150 | + Comparisons and examples for these two component patterns |
| 151 | + |
| 152 | +- **Simplifying life with React render callbacks** |
| 153 | + https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 |
| 154 | + An overview of several different ways to wrap up components, including cloning children, HOCs, and render callbacks. |
| 155 | + |
| 156 | +- **"HOCs vs render callbacks / function-as-child"** |
| 157 | + https://twitter.com/mjackson/status/890725796117176321 |
| 158 | + https://twitter.com/acdlite/status/890727843302301700 |
| 159 | + A short but interesting Twitter thread with some comments from Michael Jackson, Andrew Clark, and others, on the mental differences between using HOCs and render callbacks. |
| 160 | + |
| 161 | +- **Never Write Another HoC** |
| 162 | + https://youtu.be/BcVAq3YFiuc |
| 163 | + Michael Jackson demonstrating that a component with render prop can do anything a HOC can do, and more. |
| 164 | + |
0 commit comments