溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關解決Render Props回調的方法，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
簡而言之，只要一個組件中某個屬性的值是函數，那么就可以說該組件使用了 Render Props 這種技術。聽起來好像就那么回事兒，那到底 Render Props 有哪些應用場景呢，咱們還是從簡單的例子講起，假如咱們要實現一個展示個人信息的組件，一開始可能會這么實現：
const PersonInfo = props => (
<div>
<h2>姓名：{props.name}</h2>
</div>
);
// 調用
<PersonInfo name='web前端'/>如果，想要在 PersonInfo 組件上還需要一個年齡呢，咱們會這么實現：
const PersonInfo = props => (
<div>
<h2>姓名：{props.name}</h2>
<p>年齡：{props.age}</[>
</div>
);
// 調用
<PersonInfo name='web前端' age='18'/>然后如果還要加上鏈接呢，又要在 PersonInfo 組件的內部實現發送鏈接的邏輯，很明顯這種方式違背了軟件開發六大原則之一的 開閉原則，即每次修改都要到組件內部需修改。
開閉原則：對修改關閉，對拓展開放。
那有什么方法可以避免這種方式的修改呢？
在原生 js 中，如果咱們調用函數后，還要做些騷操作，咱們一般使用回調函數來處理這種情況。
在 react 中咱們可以使用 Render Props，其實和回調一樣：
const PersonInfo = props => {
return props.render(props);
}
// 使用
<PersonInfo
name='web前端' age = '18' link = 'link'
render = {(props) => {
<div>
<h2>{props.name}</h2>
<p>{props.age}</p>
<a href="props.link" rel="external nofollow" ></a>
</div>
}}
/>值得一提的是，并不是只有在 render 屬性中傳入函數才能叫 Render Props，實際上任何屬性只要它的值是函數，都可稱之為 Render Props，比如上面這個例子把 render 屬性名改成 children 的話使用上其實更為簡便：
const PersonInfo = props => {
return props.children(props);
};
<PersonInfo name='web前端' age = '18' link = 'link'>
{(props) => (
<div>
<h2>{props.name}</h2>
<p>{props.age}</p>
<a href={props.link}></a>
</div>
)}
</PersonInfo這樣就可以直接在 PersonInfo 標簽內寫函數了，比起之前在 render 中更為直觀。
所以，React 中的 Render Props 你可以把它理解成 js 中的回調函數。
React 組件的良好設計是可維護且易于更改代碼的關鍵。
從這個意義上說，React 提供了許多設計技術，比如組合、Hooks、高階組件、Render Props等等。
Render props 可以有效地以松散耦合的方式設計組件。它的本質在于使用一個特殊的prop(通常稱為render)，將渲染邏輯委托給父組件。
import Mouse from 'Mouse';
function ShowMousePosition() {
return (
<Mouse
render = {
({ x, y }) => <div>Position: {x}px, {y}px</div>
}
/>
)
}使用此模式時，遲早會遇到在多個 render prop 回調中嵌套組件的問題: render props 回調地獄。
1. Render Props 的回調地獄
假設各位需要檢測并顯示網站訪問者所在的城市。
首先，需要確定用戶地理坐標的組件，像<AsyncCoords render={coords => ... } 這樣的組件進行異步操作，使用 Geolocation API，然后調用Render prop 進行回調。。
然后用獲取的坐標用來近似確定用戶的城市:<AsyncCity lat={lat} long={long} render={city => ...} />，這個組件也叫Render prop。
接著咱們將這些異步組件合并到<DetectCity>組件中
function DetectCity() {
return (
<AsyncCoords
render={({ lat, long }) => {
return (
<AsyncCity
lat={lat}
long={long}
render={city => {
if (city == null) {
return <div>Unable to detect city.</div>;
}
return <div>You might be in {city}.</div>;
}}
/>
);
}}
/>
);
}
// 在某處使用
<DetectCity />可能已經發現了這個問題:Render Prop回調函數的嵌套。嵌套的回調函數越多，代碼就越難理解。這是Render Prop回調地獄的問題。
咱們換中更好的組件設計，以排除回調的嵌套問題。
2. Class 方法
為了將回調的嵌套轉換為可讀性更好的代碼，咱們將回調重構為類的方法。
class DetectCity extends React.Component {
render() {
return <AsyncCoords render={this.renderCoords} />;
}
renderCoords = ({ lat, long }) => {
return <AsyncCity lat={lat} long={long} render={this.renderCity}/>;
}
renderCity = city => {
if (city == null) {
return <div>Unable to detect city.</div>;
}
return <div>You might be in {city}.</div>;
}
}
// 在某處使用
<DetectCity />回調被提取到分開的方法renderCoords()和renderCity()中。這樣的組件設計更容易理解，因為渲染邏輯封裝在一個單獨的方法中。
如果需要更多嵌套，類的方式是垂直增加(通過添加新方法)，而不是水平(通過相互嵌套函數)，回調地獄問題消失。
2.1 訪問渲染方法內部的組件 props
方法renderCoors()和renderCity()是使用箭頭函法定義的，這樣可以將 this 綁定到組件實例，所以可以在<AsyncCoords>和<AsyncCity>組件中調用這些方法。
有了this作為組件實例，就可以通過 prop 獲取所需要的內容：
class DetectCityMessage extends React.Component {
render() {
return <AsyncCoords render={this.renderCoords} />;
}
renderCoords = ({ lat, long }) => {
return <AsyncCity lat={lat} long={long} render={this.renderCity}/>;
}
renderCity = city => {
// 看這
const { noCityMessage } = this.props;
if (city == null) {
return <div>{noCityMessage}</div>;
}
return <div>You might be in {city}.</div>;
}
}
<DetectCityMessage noCityMessage="Unable to detect city." />renderCity()中的this值指向<DetectCityMessage>組件實例。現在就很容易從this.props獲取 noCityMessage 的值 。
3. 函數組合方法
如果咱們想要一個不涉及創建類的更輕松的方法，可以簡單地使用函數組合。
使用函數組合重構 DetectCity 組件：
function DetectCity() {
return <AsyncCoords render={renderCoords} />;
}
function renderCoords({ lat, long }) {
return <AsyncCity lat={lat} long={long} render={renderCity}/>;
}
function renderCity(city) {
if (city == null) {
return <div>Unable to detect city.</div>;
}
return <div>You might be in {city}.</div>;
}
// Somewhere
<DetectCity />現在，常規函數renderCoors()和renderCity()封裝了渲染邏輯，而不是用方法創建類。
如果需要更多嵌套，只需要再次添加新函數即可。代碼垂直增長(通過添加新函數)，而不是水平增長(通過嵌套)，從而解決回調地獄問題。
這種方法的另一個好處是可以單獨測試渲染函數:renderCoords()和renderCity()。
3.1 訪問渲染函數內部組件的 prop
如果需要訪問渲染函數中的 prop ，可以直接將渲染函數插入組件中
function DetectCityMessage(props) {
return (
<AsyncCoords
render={renderCoords}
/>
);
function renderCoords({ lat, long }) {
return (
<AsyncCity
lat={lat}
long={long}
render={renderCity}
/>
);
}
function renderCity(city) {
const { noCityMessage } = props;
if (city == null) {
return <div>{noCityMessage}</div>;
}
return <div>You might be in {city}.</div>;
}
}
// Somewhere
<DetectCityMessage noCityMessage="Unknown city." />雖然這種結構有效，但我不太喜歡它，因為每次<DetectCityMessage>重新渲染時，都會創建renderCoords()和renderCity()的新函數實例。
前面提到的類方法可能更適合使用。同時，這些方法不會在每次重新渲染時重新創建。
4. 實用的方法
如果想要在如何處理render props回調方面具有更大的靈活性，那么使用React-adopt是一個不錯的選擇。
使用 react-adopt 來重構 <DetectCity> 組件：
import { adopt } from 'react-adopt';
const Composed = adopt({
coords: ({ render }) => <AsyncCoords render={render} />,
city: ({ coords: { lat, long }, render }) => (
<AsyncCity lat={lat} long={long} render={render} />
)
});
function DetectCity() {
return (
<Composed>
{ city => {
if (city == null) {
return <div>Unable to detect city.</div>;
}
return <div>You might be in {city}.</div>;
}}
</Composed>
);
}
<DetectCity />react-adopt需要一個特殊的映射器來描述異步操作的順序。同時，庫負責創建定制的渲染回調，以確保正確的異步執行順序。
你可能會注意到的，上面使用react-adopt 的示例比使用類組件或函數組合的方法需要更多的代碼。那么，為什么還要使用“react-adopt”呢?
不幸的是，如果需要聚合多個render props的結果，那么類組件和函數組合方法并不合適。
4.1 聚合多個渲染道具結果
想象一下，當咱們渲染3個render prop回調的結果時(AsyncFetch2、AsyncFetch3、AsyncFetch4)
function MultipleFetchResult() {
return (
<AsyncFetch2 render={result1 => (
<AsyncFetch3 render={result2 => (
<AsyncFetch4 render={result3 => (
<span>
Fetch result 1: {result1}
Fetch result 2: {result2}
Fetch result 3: {result3}
</span>
)} />
)} />
)} />
);
}
<MultipleFetchResult /><MultipleFetchResult>組件沉浸所有3個異步獲取操作的結果，這是一個闊怕回調地獄的情況。
如果嘗試使用類組件或函數的組合方法，它會很麻煩。 回調地獄轉變為參數綁定地獄：
class MultipleFetchResult extends React.Component {
render() {
return <AsyncFetch2 render={this.renderResult1} />;
}
renderResult1(result1) {
return (
<AsyncFetch3
render={this.renderResult2.bind(this, result1)}
/>
);
}
renderResult2(result1, result2) {
return (
<AsyncFetch3
render={this.renderResult3.bind(this, result1, result2)}
/>
);
}
renderResult3(result1, result2, result3) {
return (
<span>
Fetch result 1: {result1}
Fetch result 2: {result2}
Fetch result 3: {result3}
</span>
);
}
}
// Somewhere
<MultipleFetchResult />咱們必須手動綁定render prop回調的結果，直到它們最終到達renderResult3()方法。
如果不喜歡手工綁定，那么采用react-adopt可能會更好：
mport { adopt } from 'react-adopt';
const Composed = adopt({
result1: ({ render }) => <AsyncFetch2 render={render} />,
result2: ({ render }) => <AsyncFetch3 render={render} />,
result3: ({ render }) => <AsyncFetch4 render={render} />
});
function MultipleFetchResult() {
return (
<Composed>
{({ result1, result2, result3 }) => (
<span>
Fetch result 1: {result1}
Fetch result 2: {result2}
Fetch result 3: {result3}
</span>
)}
</Composed>
);
}
// Somewhere
<MultipleFetchResult />在函數({result1, result2, result3}) =>{…}提供給<Composed>。因此，咱們不必手動綁定參數或嵌套回調。
當然，react-adopt的代價是要學習額外的抽象，并略微增加應用程序的大小。
上述就是小編為大家分享的解決Render Props回調的方法了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
