成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React手稿之高階組件

dkzwm / 2256人閱讀

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

Higher-Order Components

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

HOC 是一個(gè)函數(shù)。

HOC 返回一個(gè)Component。

示例：

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

類似React 0.15版本之前的mixin。

多個(gè)組件同用一段代碼，或者同樣的方法時(shí)，可以使用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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108570.html

相關(guān)文章

  • React手稿之 React-Redux

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

    Freelander 評(píng)論0 收藏0

  • React手稿之State Hooks of Hooks

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

    DC_er 評(píng)論0 收藏0

  • React手稿之類型檢查

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

    tomorrowwu 評(píng)論0 收藏0

  • React.memo

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

    Meils 評(píng)論0 收藏0

  • React 手稿 - Component state

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

    dcr309duan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<