首頁 > web前端 > js教程 > 主體

有關對React學習方法介紹

巴扎黑
發布: 2017-08-11 11:11:49
原創
1412 人瀏覽過

這篇文章主要為大家介紹了關於React進階之組件的解耦之道,文中透過詳細的範例程式碼給大家介紹了組件分割與解耦的方法,對大家的學習或工作具有一定的參考學習價值,需要的朋友們下面跟著小編一起學習學習吧。

前言

眾所周知,React中的元件非常的靈活可擴展,不過隨著業務複雜度的增加和許多外部工具庫的引入,組件往往也會顯得浮腫,接下來我們就一起來看看常見的幾種,遵循單一職責原則的,組件分割與解耦的方法,話不多說了,來一起看看詳細的介紹:

一、分割render 函數

當一個元件渲染的內容較多時,有一個快速且通用的方法是建立sub-render函數來簡化原來龐大的render


class Panel extends React.Component {
 renderHeading() {
 // ...
 }

 renderBody() {
 // ...
 }

 render() {
 return (
 <p>
 {this.renderHeading()}
 {this.renderBody()}
 </p>
 );
 }
}
登入後複製

為了再次簡化sub-render函數,我們也可以採用Functional Components寫法,這種方式生成了更小的處理單元,且更有利於測試


const PanelHeader = (props) => (
 // ...
);

const PanelBody = (props) => (
 // ...
);

class Panel extends React.Component {
 render() {
 return (
 <p>
 // Nice and explicit about which props are used
 <PanelHeader title={this.props.title}/>
 <PanelBody content={this.props.content}/>
 </p>
 );
 }
}
登入後複製

#二、用props 傳遞元素

如果一個元件的狀態或配置較多,我們可以運用props傳遞元素而不僅是數據,例如再聲明一個元件,使其中的父元件只專注於配置


class CommentTemplate extends React.Component {
 static propTypes = {
 // Declare slots as type node
 metadata: PropTypes.node,
 actions: PropTypes.node,
 };

 render() {
 return (
 <p>
 <CommentHeading>
  <Avatar user={...}/>

  // Slot for metadata
  <span>{this.props.metadata}</span>

 </CommentHeading>
 <CommentBody/>
 <CommentFooter>
  <Timestamp time={...}/>

  // Slot for actions
  <span>{this.props.actions}</span>

 </CommentFooter>
 </p>
 );
 }
}
登入後複製

父元件


class Comment extends React.Component {
 render() {
 const metadata = this.props.publishTime ?
 <PublishTime time={this.props.publishTime} /> :
 <span>Saving...</span>;

 const actions = [];
 if (this.props.isSignedIn) {
 actions.push(<LikeAction />);
 actions.push(<ReplyAction />);
 }
 if (this.props.isAuthor) {
 actions.push(<DeleteAction />);
 }

 return <CommentTemplate metadata={metadata} actions={actions} />;
 }
}
登入後複製

#三、使用高階元件




############# ##實現點擊某組件的超鏈接,發送該組件的ID,我們大多的解決方法可能如下#############
class Document extends React.Component {
 componentDidMount() {
 ReactDOM.findDOMNode(this).addEventListener(&#39;click&#39;, this.onClick);
 }

 componentWillUnmount() {
 ReactDOM.findDOMNode(this).removeEventListener(&#39;click&#39;, this.onClick);
 }

 onClick = (e) => {
 if (e.target.tagName === &#39;A&#39;) { // Naive check for <a> elements
 sendAnalytics(&#39;link clicked&#39;, {
 documentId: this.props.documentId // Specific information to be sent
 });
 }
 };

 render() {
 // ...
 }
}
登入後複製
###然而它卻存在代碼不能復用,組件重構困難等問題######我們可以用高階元件來解決這些問題,顧名思義,高階元件就是一個函數,傳給它一個元件,它會傳回一個新的元件####### ####
function withLinkAnalytics(mapPropsToData, WrappedComponent) {
 class LinkAnalyticsWrapper extends React.Component {
 componentDidMount() {
 ReactDOM.findDOMNode(this).addEventListener(&#39;click&#39;, this.onClick);
 }

 componentWillUnmount() {
 ReactDOM.findDOMNode(this).removeEventListener(&#39;click&#39;, this.onClick);
 }

 onClick = (e) => {
 if (e.target.tagName === &#39;A&#39;) { // Naive check for <a> elements
 const data = mapPropsToData ? mapPropsToData(this.props) : {};
 sendAnalytics(&#39;link clicked&#39;, data);
 }
 };

 render() {
 // Simply render the WrappedComponent with all props
 return <WrappedComponent {...this.props} />;
 }
 }

 return LinkAnalyticsWrapper;
}
登入後複製
###簡化程式碼如下############
class Document extends React.Component {
 render() {
 // ...
 }
}

export default withLinkAnalytics((props) => ({
 documentId: props.documentId
}), Document);
登入後複製

以上是有關對React學習方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!