容器組件
這種模式又稱爲“聰明組件”和“傻瓜組件”，其實名稱又很多：
- 容器組件和展示組件（Container Component & Presentational Component）
- 胖組件和瘦組件
- 有狀態組件和無狀態組件
其實這種模式就是兩個組件形成父子關係，父組件負責管理數據狀態，子組件子負責展示。該模式主要是爲了讓一個組件的職責更少（Separation of Concerns，關注度分離原則）。
因爲父組件負責管理數據狀態，因此父組件是有狀態組件，一般使用Class來創建；而子組件只負責展示，因此可以是純函數，可以使用函數形式來創建。
但函數組件不能應用shouldComponentUpdata生命週期鉤子，不能更有效的渲染，所以一般推薦使用class以及PureComponent來創建子組件。
class ChildComponent extends React.PureComponent {
render() {
return <div>Child Component</div>
}
}
在React v16.6.0之後的版本中，可以使用React.memo來完成相同的功能，React.memo是一個高階組件，相比PureComponent而言，允許用戶創建相同功能的函數式組件。
const ChildComponent = React,memo(props => {
return <div>Child Component</div>
})
高階組件
在React中，“一切皆組件”，並且“組件可以是函數”。因此兩者結合在一起會有一些奇妙的反應，高階組件是其中的一個，下面的render Props是另外一個。
高階組件是爲了遵循DRY（Don`t Repeat Yourself）原則，實現組件的複用。
高階組件本質是一個函數，接受一個或多個組件作爲參數，返回另外一個新組件（這個新組件子在功能上應該比傳入的組件強，因此該模式也叫增強組件模式（Ehancer Component））。
const withDoNothing = (Component) => {
const NewComponent = (props) => {
return <Component {...props} />;
}
return NewComponent;
}
幾點建議
- 高階組件應該是一個純函數，這樣可以實現多個高階組件的鏈式調用；
- 高階組件名統一以with開頭，這樣一看到with開頭的組件就知道是一個高階組件；
- 高階組件在參數上應該是透明的，應該將傳入高階組件的參數原模原樣的傳給原組件，這樣避免了參數的混亂，可以只看高階組件的參數定義就知道傳遞哪些參數。
幾個缺點
1.高階組件需要處理displayName，否則debug會很痛苦；
const withExample = (Component) => {
const NewComponent = (props) => {
return <Component {...props} />;
}
NewComponent.displayName = `withExample (${Component.displayName || Component.name || 'Component' })`;
return NewComponent;
}
2.高階組件支持嵌套調用，但應該注意，不要有過深的嵌套，否則報錯時會看到超深的stack trace；
3.使用高階組件一定要小心，不要在中間過程重複產生React組件，就像下面這樣：
const Example = () => {
const EnhancedFoo = withExample(Foo);
return <EnhancedFoo />
}
render props
任何被用於告知組件需要渲染什麼內容的函數prop在技術上都可以被稱爲“render prop”。
也就是說可以通過props傳遞一個函數給組件，在組件內部調用這個函數，如果這個函數返回的是React元素（也就是說這個函數本身就是一個組件），那麼這就是render props模式。
使用render props模式，可以將組件應該渲染什麼內容的權利交給組件調用方（父組件），從這個方面來講，render props其實就是React世界中的“依賴注入”（Dependency Injection）。
<Auth
login={{username}} => <h1>Hello {userName}</h1>}
nologin = {() => <h1>Please login</h1>}
/>
render props和高階組件的比較
- render props模式的應用，就是做一個React 組件，而高階組件，雖然名爲“組件”，其實只是一個產生React組件的函數；
- render props模式沒有高階組件那些缺點，但同時也沒有高階組件可鏈式調用的優點，不過這種模式更加靈活。
因此在實際開發過程中，建議按照這樣的順序考慮：
也就是優先考慮能不能通過普通組件完成功能，如果不能，優先考慮render props模式，最後再考慮高階組件。