React 深入系列7 React 常用模式

react 深入系列，深入講解了react中的重點概念、特性和模式等，旨在幫助大家加深對react的理解，以及在專案中更加靈活地使用react。

1. 受控元件

react 元件的資料流是由state和props驅動的，但對於input、textarea、select等表單元素，因為可以直接接收使用者在介面上的輸入，所以破壞了react中的固有資料流。為了解決這個問題，react引入了受控元件，受控元件指input等表單元素顯示的值，仍然是通過元件的state獲取的，而不是直接顯示使用者在介面上的輸入資訊。

受控元件的實現：通過監聽表單元素值的變化，改變元件state，根據state顯示元件最終要展示的值。乙個簡單的例子如下：

class nameform extends react.component ;
this.handlechange = this.handlechange.bind(this);
this.handlesubmit = this.handlesubmit.bind(this);
}  handlechange(event) );
}  handlesubmit(event) 
render
() }
複製**

和受控元件對應的概念是非受控元件，非受控元件通過ref獲取表單元素的值，在一些場景下有著特有的作用（如設定表單元素的焦點）。

2. 容器元件

容器元件和展示元件是一組對應的概念，關注的是元件邏輯和元件展示的分離。邏輯由容器元件負責，展示元件聚焦在檢視層的展現上。在react 深入系列2：元件分類中已對容器元件和展示元件作過詳細介紹，這裡不再贅述。

3. 高階元件

高階元件是一種特殊的函式，接收元件作為輸入，輸出乙個新的元件。高階元件的主要作用是封裝元件的通用邏輯，實現邏輯的復用。在react 深入系列6：高階元件中已經詳細介紹過高階元件，這裡也不再贅述。

4. children傳遞

首先，這個模式的命名可能並不恰當。這個模式中，借助react 元件的children屬性，實現元件間的解耦。常用在乙個元件負責ui的框架，框架內部的元件可以靈活替換的場景。

乙個示例：

// modaldialog.js
export default function modaldialog() ;};
render
() 複製**

modaldialog元件是ui的框，框內元件可以靈活替換。

5. render props

render props是把元件部分的渲染邏輯封裝到乙個函式中，利用元件的props接收這個函式，然後在元件內部呼叫這個函式，執行封裝的渲染邏輯。

看乙個官方的例子：

class cat extends react.component } />
);}}
class mouse extends react.component ;
}  handlemousemove(event) );
}  render
() } onmousemove=>
);}}
class mousetracker extends react.component />
);}}
複製**

mouse監聽滑鼠的移動，並將滑鼠位置儲存到state中。但mouse元件並不知道最終要渲染出的內容，需要呼叫this.props.render方法，執行渲染邏輯。本例中，cat元件會渲染到滑鼠移動到的位置，但完全可以使用其他效果來跟隨滑鼠的移動，只需更改render方法即可。由此可見，mouse元件只關注滑鼠位置的移動，而跟隨滑鼠移動的介面效果，由使用mouse的元件決定。這是一種基於切面程式設計的思想（了解後端開發的同學應該比較熟悉）。

使用這種模式，一般習慣將封裝渲染邏輯的函式賦值給乙個命名為render的元件屬性（如本例所示），但這並不是必需，你也可以使用其他的屬性命名。

這種模式的變種形式是，直接使用react元件自帶的children屬性傳遞。上面的例子改寫為：

class mouse extends react.component } onmousemove=>
);}}
mouse.proptypes = ;
class mousetracker extends react.component 
);}}
複製**

注意children的賦值方式。

react router 和 react-motion 這兩個庫都使用到了render props模式。**很多場景下，render props實現的功能也可以通過高階元件實現。**本例也可以用高階元件實現，請讀者自行思考。

6. provider元件

這種模式借助react的context，把元件需要使用的資料儲存到context，並提供乙個高階元件從context中獲取資料。

乙個例子：

先建立myprovider，將共享資料儲存到它的context中，myprovider一般作為最頂層的元件使用，從而確保其他元件都能獲取到context中的資料：

import react from "react";
import proptypes from "prop-types";
const contexttypes = )
};export class myprovider extends react.component ;
}  render
() }
複製**

然後建立高階元件connectdata，用於從context中獲取所需資料：

class extends react.component = this;

return}};

複製**

最後在應用中使用：

const somecomponentwithdata = connectdata(somecomponent)
const shareddata = 
};  render
() }
複製**

provider元件模式非常實用，在react-redux、mobx-react等庫中，都有使用到這種模式。京東

React 深入系列7 React 常用模式

7 react 中的條件渲染

React 7 React高階元件

react系列教程

React 深入系列7 React 常用模式

7 react 中的條件渲染

React 7 React高階元件

react系列教程

相關推薦