React手稿之高階組件

dkzwm 發布于2019-08-26 12:22 / 2203人閱讀

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

Higher-Order Components

HOC 不是React的標準API。

HOC 是一個函數。

HOC 返回一個Component。

示例：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

使用場景 代碼復用

類似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 
  }
}

渲然劫持

條件渲然。根據props或者state條件返回在渲然的內容。

示例：

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();
      }
    }
  }
};

在線示例

GPU云服務器云服務器高階組件手稿高階函數高階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108570.html

React手稿之 React-Redux

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

Freelander 2019-08-23 12:57 評論0 收藏0
React手稿之State Hooks of Hooks

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

DC_er 2019-08-23 13:53 評論0 收藏0
React手稿之類型檢查

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

tomorrowwu 2019-08-26 12:24 評論0 收藏0
React.memo

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

Meils 2019-08-23 12:52 評論0 收藏0
React 手稿 - Component state

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

dcr309duan 2019-08-23 12:55 評論0 收藏0