React 高階之選擇合適的元件型別

最近專案基本都是用 react，今天總結分享 react component 常見的幾種形式，如果你在寫 react 時經常不知道怎麼拆分**，這篇文章或許對你有所幫助。

為了更充分理解 react，先搞懂平時寫的 jsx 是什麼。初學的時候有比較大困惑，這是一門新語言嗎？大部分人是匆匆掃過文件就開始開發。通過 babel-presets-react 處理能看到，其實 jsx 只是語法糖，最終在瀏覽器跑的還是 js。react component 最終都通過 react.createelement 建立。總之，寫 react 其實就是在寫 js。

react 可以使用 function 來建立 component，這類 component 沒有 lifecycle, 內部不維護 state，只要傳入的 props 有變化則進行重新渲染。

function
welcome(props) h1>;}
複製**

用箭頭函式的寫法還更加簡潔。

const welcome = props => ;
複製**

上面兩種形式生成 es5 **都是一樣的。

var welcome = function
welcome(props) ;
複製**

sfc 的特點是純粹只做 render，**簡短沒有其他條件分支，並且相比 class component 編譯後的**量會少一些。

尷尬的是，在 react 16.7 react hooks 出來之後，sfc 這個名字有歧義了，因為用上 usestate，sfc 也可以有 local state, 同樣可以擁有 lifecycle。再稱之為 stateless components 就很尷尬，改名叫 fc ？

高階元件對於 vue 開發者來說應該是個陌生的概念（不知道，我用 vue 的時候沒見過類似的用法）。從**上看，高階元件就是乙個方法，傳入乙個元件，返回另乙個元件。

function
return
class
extends
react.component
render() 
}}複製**

最常見的高階元件是 react-redux 裡面的 connect 方法，通過傳入元件和 map*toprops 方法，讓元件和 store 連線。元件內部就可以直接通過 props 獲得 connect 之後的值。

exprot default connect(
mapstatetoprops,
mapdispatchtoprops,
)(component);
複製**

高階元件適合用來擴充套件功能，把這部分功能從業務元件中抽離出來，需要的套上，不需要的時候移除，對被包裹元件侵入性非常小。

有些業務場景下，在執行時才能確定具體的標籤或者元件是什麼。在 react 的世界裡面，以大寫字母開頭會被當成動態元件載入，而小寫字母開頭會被認為是 html dom tag。

// heading.js
render() = this.props;
return
tag>
}複製**

根據萬物皆為 js 理論，只要傳入不同的 tag 標籤，就會渲染出不同的 heading 標籤。

我們常用這種方式，在後端配置元件和資料，前端讀取配置之後渲染出對應的內容。

react children 還可以是 function 型別，如果直接呼叫它會什麼寫法？比如封裝乙個 loading 元件，會給 children 提供 loading 引數，業務元件再根據 loading 判斷需要 render 什麼內容。

class
loadarea
extends
component
; componentdidmount() )
}).catch(() => )
})} render() )}
react.fragment>
);}}
複製**

用法

render() ) => 
loadingarea>
}複製**

同樣的，最終執行時都是 js，沒有什麼好奇怪的。

react 16.* 新版本的 conext.consumer 就是採用了這種寫法。

render() ) => (
toggle theme
)}...
}複製**

再以最近開發的例子，分享元件拆分的好處。

需求：開發倒計時元件，運營配置倒計時結束時間，倒計時初始化時間從服務端獲取，結束之前顯示倒計時，倒計時結束之後做對應的操作，比如切換倒計時為其他元件。

元件拆分：

偽**：

// countdowncontainer.js
render() = this.props;
return (
endtime= >
remainingseconds= />
: rendersomethingaftercountdown()
)}timeleftprovider>
);}複製**

// timeleftprovider.js
export
default
class
timeleftprovider
extends
purecomponent
// ...
componentdidmount() 
poll() , pollinterval * 1000);
} countdown() ));
}, 1000);
} render() = this.state;
return
this.props.children(remainingseconds, reliable);
}}複製**

// countdown.js
function
countdown(props) = props;
const numbers = formatseconds(remainingseconds);
const inputs = ['days', 'hours', 'minutes', 'seconds'];
return (
stylename=>
)).map(
//...)}
div>
);}複製**

最終得到的結果是：

React 高階之選擇合適的元件型別

React之 4 高階元件

React高階元件

react高階元件

React 高階之選擇合適的元件型別

React之 4 高階元件

React高階元件

react高階元件

相關推薦