成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React手稿之高階組件

dkzwm / 2226人閱讀

摘要：示例使用場景代碼復(fù)用類似版本之前的。多個組件同用一段代碼，或者同樣的方法時，可以使用。示例在線示例抽象和更改可以通過包裹的組件公共抽象出來?？梢酝ㄟ^包裹的組件傳遞修改添加等的示例渲然劫持條件渲然。示例反向繼承返回的高階組件類繼承了。

Higher-Order Components

HOC 不是React的標(biāo)準(zhǔn)API。

HOC 是一個函數(shù)。

HOC 返回一個Component。

示例：

const EnhancedComponent = higherOrderComponent(WrappedComponent);
使用場景 代碼復(fù)用

類似React 0.15版本之前的mixin。

多個組件同用一段代碼，或者同樣的方法時，可以使用HOC。

示例：

import React, { PureComponent } from "react";

const Common = (WrapComponent) => {
  return (
    

      
Title

      
    

  );
};

const Header = () => 
Header
;
const Footer = () => 
Footer
;

export default class extends PureComponent {
  render() {
    return (
      

        

          
Header Component

          {Common(Header)}
        

        

        

          
Footer Component

          {Common(Footer)}
        

      

    );
  }
}

在線示例

抽象state和更改props

可以通過WrappedComponent包裹的組件公共state抽象出來。

可以通過WrappedComponent包裹的組件傳遞修改、添加等的props.

示例：

const HOComp = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {name: ""};
    }

    componentDidMount() {
      this.setState({name: WrappedComponent.displayName || WrappedComponent.name || "Component";});
    }

    return 
  }
}
渲然劫持

條件渲然。根據(jù)props或者state條件返回在渲然的內(nèi)容。

示例：

const HOComp = (WrappedComponent) => {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}
反向繼承

返回的高階組件類（Enhancer）繼承了 WrappedComponent。

示例：

const EnchanceComponent = (WrappedCompopnent) => {
  return class extends WrappedCompopnent {
    constructor(props) {
      super(props);
      this.state = { error: "" };
    }
    componentDidMount() {
      /*do something*/
      super.componentDidMount();
    }
    render() {
      if (this.state.error) {
        return 
{this.state.error}
;
      } else {
        return super.render();
      }
    }
  }
};

在線示例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108570.html

相關(guān)文章

  • React手稿之 React-Redux

    摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調(diào)試插件日志安裝組件。然后加入到中即可例如擴(kuò)展程序需要在應(yīng)用市場安裝然后在中使用增強(qiáng)功能將加入即可在線實(shí)例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

    Freelander 評論0 收藏0

  • React手稿之State Hooks of Hooks

    摘要：官方也陳述，接下來的的工作會投入到中。從目前官方的文檔可以看出，從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發(fā)布的版本中有該功能，想體驗(yàn)該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。 官方也陳述，接下來的90%的工作會投入到React ...

    DC_er 評論0 收藏0

  • React手稿之類型檢查

    摘要：類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項(xiàng)目中可以使用或者來實(shí)現(xiàn)。示例以上內(nèi)容在實(shí)現(xiàn)一個通用組件時非常有用。類型檢查和參數(shù)默認(rèn)值一起使用，保證組件的正常運(yùn)行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數(shù)正確性。 通常在項(xiàng)目中可以使用Flow或者TypeScript來實(shí)現(xiàn)。 React提供了PropTypes來檢查類型。 示例： imp...

    tomorrowwu 評論0 收藏0

  • React.memo

    摘要：介紹之前，先了解一下和。不同是沒有實(shí)現(xiàn)，而通過和的淺比較實(shí)現(xiàn)了。如果組件的和相同時，的內(nèi)容也一致，那么就可以使用了這樣可以提高組件的性能。例如當(dāng)和中有復(fù)雜數(shù)據(jù)結(jié)果時，不好使用。示例這種方式依然是一種對象的淺比較，有復(fù)雜對象時無法。 介紹React.memo之前，先了解一下React.Component和React.PureComponent。 React.Component React...

    Meils 評論0 收藏0

  • React 手稿 - Component state

    摘要：實(shí)例在線實(shí)例定義寫在函數(shù)中，是一個對象。一般情況下需要指定默認(rèn)值，預(yù)防拋使用在組件中通過訪問組件對象屬性的方式。把這種組件也稱為非受控性組件。通過提供了方法，來實(shí)現(xiàn)的修改。回調(diào)非控組件在線實(shí)例受控組件在線實(shí)例推薦閱讀手稿 Component state 實(shí)例： import React, { PureComponent } from react; export default cla...

    dcr309duan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<