原文地址：https://medium.com/teamsubchannel/react-component-patterns-e7fb75be7bb0
作者：William Whatley
摘要：本文介紹了4種組件類型：容器組件、展示組件、高階組件和渲染回調。

今天，我想花一點時間來分享我學習React組件模式的經驗。這個想法來源于一次聚會時的技術交流。組件是React的核心，因此有必要去理解如何使用它們。

以下的例子都脫胎于Michael Chan gave on React component patterns這個視頻的思想。我非常推薦你們看一看。

什么是組件？

reactjs.org上說：“組件能夠將你的界面分割成獨立且可復用的小塊，而這些小組件都是互相獨立的。”

當你第一次執行npm install react命令的時候，你得到了一個組件以及相關的API。與JS的函數類似，一個組件接收輸入，叫做props。然后返回React元素，作用是描述UI界面的樣式。這就是React作為聲明式API的表現形式，因為你只需要告訴它你想要展示的UI，剩下的React都會幫你完成。

對于聲明式API的概念，你可以想象成滴滴打車的場景——告訴司機你的目的地，接著讓他來完成開車的工作。而命令式API不同，你將完成所有任務，既是乘客，也是司機。

組件API

當你在安裝好React后，得到了5類API：

• render
• state
• props
• context
• lifecycle events

盡管寫組件時可以把上面所有的API都使用一遍，但是你很快會發現一些組件只需要用到某些API，而另一些組件也只會使用另一些特定的API。而這兩類組件往往被劃分為有狀態與無狀態組件兩大類。有狀態的組件會有代表性地使用有狀態API：render、state和生命周期。但無狀態組件只會使用render、props和context。

以上就是我們在介紹組件模式前所需要的知識鋪墊。組件模式是設計組件的最佳實踐，最初是把組件切割成數據/邏輯層和UI/展示層。通過拆分組件的職責，能夠設計出更容易復用、更內聚的組件，從而組裝成復雜的UI界面。這個特性對于構建可擴展的應用時是非常重要的。

組件模式

常用的組件模式有：

• 容器組件
• 展示組件
• 高階組件HOC
• 渲染回調

容器組件

“容器組件的作用是獲取數據和渲染子組件。”——Jason Bonta

藍色代表容器組件，灰色代表展示用的子組件

容器組件使用了有狀態的API，封裝了數據邏輯層。通過使用生命周期，你可以連接Redux或Flux等狀態管理庫，然后把數據和回調函數當作props傳遞給子組件。在容器組件的render方法中，你可以用子展示組件來拼裝UI界面。容器組件往往都設計成一個類組件，而不是純函數組件，為的就是能夠使用所有有狀態的API。

在下面的例子中，我們有一個名為Greeting的有狀態的類組件，包括componentDidMount()和render方法。

class Greeting extends React.Component {constructor() {super();this.state = {name: "",};}componentDidMount() {// AJAXthis.setState(() => {return {name: "William",};});}render() {return (<div><h1>Hello! {this.state.name}</h1></div>);} }

這時，這個組件僅僅是一個有狀態的類組件。為了讓它成為一個真正的容器組件，我們要把UI部分放進一個展示組件中。下面就來講講展示組件。

展示組件

展示組件使用到props、render和context這些無狀態API，并且可以寫成更簡潔優雅的函數式無狀態組件。

const GreetingCard = (props) => {return (<div><h1>Hello! {props.name}</h1></div>) }

展示組件只能從父級組件或容器組件傳來的props中接收數據和回調函數。

藍色代表展示組件，而灰色代表容器組件。

容器組件和展示組件合并起來后，封裝成了一個真正被使用的組件：

const GreetingCard = (props) => {return (<div><h1>{props.name}</h1></div>) }class Greeting extends React.Component {constructor() {super();this.state = {name: "",};}componentDidMount() {// AJAXthis.setState(() => {return {name: "William",};});}render() {return (<div><GreetingCard name={this.state.name} /></div>);} }

如你所見，我把Greeting類組件中的UI部分移除，放入一個無狀態的函數組件中。當然，這只是一個簡單的例子，但對于復雜的應用來說，這是最基本的做法。

高階組件（HOC）

高階組件就是一個把組件當作參數，并且返回新組件的函數。

它的強大之處在于能夠給任意數量的組件提供數據源，并且可以被用來實現邏輯復用。用react-router-v4或Redux舉個例子。使用react-router-v4時，你可以使用withRouter()來繼承傳給組件的props。而使用Redux時，你通過使用connect({})()來把actions當作props傳遞給子組件。

虛線表示的是高階組件，它能夠返回一個新的組件。

看看這個例子：

import {withRouter} from 'react-router-dom';class App extends React.Component {constructor() {super();this.state = {path: ''}}componentDidMount() {let pathName = this.props.location.pathname;this.setState(() => {return {path: pathName,}})}render() {return (<div><h1>Hi! I'm being rendered at: {this.state.path}</h1></div>)} }export default withRouter(App);

當導出我的組件時，我使用react-router-v4提供的withRouter()方法把它包裹起來。而在App的componentDidMount()生命周期中，我通過this.props.location.pathname來更新狀態。在被withRouter()包裹后，我的類組件現在可以通過props訪問react-router-v4的方法，就像this.props.location.pathname。像這樣的例子，實在是不勝枚舉。

渲染回調（render callbacks）

與高階組件類似，渲染回調或者說渲染props都是用來實現組件邏輯復用功能。相比較于大多數開發者使用的高階組件，渲染回調也有自己的優勢。具體優勢可以閱讀Michael Jackson所寫的這個視頻——《Never write another HOC.》。視頻中所講的關鍵點就是渲染回調能夠減少命名空間的沖突并且解釋邏輯的來源。

藍色虛線代表渲染回調函數。 class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0,};}increment = () => {this.setState(prevState => {return {count: prevState.count + 1,};});};render() {return (<div onClick={this.increment}>{this.props.children(this.state)}</div>);} }class App extends React.Component {render() {return (<Counter>{state => (<div><h1>The count is: {state.count}</h1></div>)}</Counter>);} }

在上面的Counter類中，我在render里使用了this.props.children，然后把this.state當作參數傳給這個函數。之后在App類中，我把想要展示的組件用Counter組件包裹起來，這樣就能使用Counter的代碼邏輯了。render函數的返回結果是代碼28行，在那里我通過{state => ()}自動獲取到Counter的state。

感謝您的閱讀

我很樂意接受大家的意見來使我成長。我對React組件模式的見解還不夠成熟，所以我也算是在寫作中學習吧。

查看更多我翻譯的Medium文章請訪問：
項目地址：https://github.com/WhiteYin/translation
SF專欄：https://segmentfault.com/blog/yin-translation

總結

以上是生活随笔為你收集整理的[翻译]React组件模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。