国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<abbr id="kgqee"></abbr>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/ES6中React Mixins的使用（第四部分）

ES6中React Mixins的使用（第四部分）

Karrdy 發布于2019-08-20 17:59 / 2106人閱讀

摘要：在的組建創建中，不太可能使用混合機制。在中，這個組建將被命名為。他們中的其中一個如下結論高階組建功能強大和極具表現力。現在高階組建廣泛的被使用來替代老式的句法。

這是React和ECMAScript6／ECMAScript7結合使用系列文章的第四篇。

下面是所有系列文章章節的鏈接：

React 、 ES6 - 介紹（第一部分）

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源碼

React	JS

當我們使用React.createClass()時，你有可能使用所謂的混合開發。它們允許插入一些額外的方法到React組建中。這個概念不只是針對React，它也存在于vanilla JS和其它的語言/框架中。

在ES6的React組建創建中，不太可能使用混合機制。我不會深入考慮這個決定的原因。如果你感興趣，你可以點擊下面的鏈接，了解更多.

About mixins in ES6 in official React blog

Mixins Are Dead. Long Live Composition by Dan Abramov

相反，我們將更加專注于具體的例子。

Higher-Order Components instead of Mixins

我們將使用本系列文章中的part2中的 CartItem組建。你可以從這里獲取到源碼。

讓我們來看看如何伴隨其它的組建生成一個每秒加1的定時器。

為了更好的說明，我們將不改變CartItem的代碼。我們重新提供新的組建，這個新的組建不會破壞CartItem的原始內容。而是會在保持CartItem原始內容的情況下，對CartItem增強一些額外的方法。

這聽起來很神秘，跟著我，他會慢慢的變得更加清晰。

讓我們想象我們已經有了IntervalEnhance組建：

import React from "react";
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here
}

export default IntervalEnhance(CartItem);

現在該是時候寫IntervalEnhance組建了。我們將增加一個文件名為intervalEnhance.jsx文件。

import React from "react";

export var IntervalEnhance = ComposedComponent => class extends React.Component {

    static displayName = "ComponentEnhancedWithIntervalHOC";

    constructor(props) {
        super(props);
        this.state = {
            seconds: 0
        };
    }

    componentDidMount() {
        this.interval = setInterval(this.tick.bind(this), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    tick() {
        this.setState({
            seconds: this.state.seconds + 1000
        });
    }

    render() {
        return ;
    }
};

代碼解釋：

Line 3.ComposedComponent => class extends React.Component部分的代碼等價于定義一個返回class的方法。ComposedComponent是我們希望增強的組建(在我們這個案例中，它是CartItem),通過使用export var IntervalEnhance，我們可以把整個方法作為IntervalEnhance(指向上面代碼中的CartItem)導出。

Line 5.幫助調試。在React DevTools中，這個組建將被命名為ComponentEnhancedWithIntervalHOC。

Lines 7-12. 初始化一個值為0，名字為seconds的狀態機變量。

Lines 14-26. 為這個組建提供啟動和停止的生命周期函數。

Line 29. 在這里有很多感興趣的東西。這一行將給我的組建增加所有的state和props并且轉換成CartItem組建。同時，通過這行代碼的設置，在CartItem中我們將可以正常訪問this.state.seconds屬性。

最后一步需要改變CartItem component的render方法。我們將在這個視圖上直接輸出this.state.seconds.

import React from "react";
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here

    render() {
        return 
                                    
                
                    Time elapsed for interval: 
                    {this.props.seconds} ms
                    
            ;
        }
}
export default IntervalEnhance(CartItem);

在瀏覽器中打開這個頁面，你將看見每秒跳動一次的label。

注意 - 沒有觸碰CartItem組建(通過render方法的分離)就全完全搞定！這就是高階組建的力量。

現在，請看看最后所有的代碼。如果代碼不清晰或者有問題，很高興你能提供相應的反饋。

Use ES7 Decorators instead of Mixins

如果你喜歡ES7裝飾，可以使用一種熟悉的方式來使用他們。

首先，安裝babel-plugin-transform-decorators-legacy.

npm install --save-dev babel-plugin-transform-decorators-legacy

從GitHub repository獲取修改過的gulpfile.js文件源碼。

然后：

import React from "react";
import { IntervalEnhance } from "./intervalEnhance";

@IntervalEnhance
export default class CartItem extends React.Component {
    // component code here
}

What about PureRenderMixin?

如果你喜歡使用像PureRenderMixin的mixins,那么在ES6中有不同的方法可以實現相同的功能。他們中的其中一個如下：

class Foo extends React.Component {
   constructor(props) {
     super(props);
     this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
   }
   render () {
     return Helllo
   }
 }

結論

高階組建功能強大和極具表現力。現在高階組建廣泛的被使用來替代老式的mixin句法。隨時創建自己的機制來處理組件之間的混合功能。

參考文檔

About mixins in ES6 in official React blog

Mixins Are Dead. Long Live Composition by Dan Abramov

Original gist by Sebastian Markb?ge showing usage of composition for React components

JSX Spread Attributes

Gist with PureRenderMixin in ES6

掃碼申請加入全棧部落

云服務器 GPU云服務器第四部分 react使用webrtc js中獲取字符串部分 linux中的使用

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

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

React類，方法綁定（第三部分）

摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

livem 2019-08-20 17:59 評論0 收藏0
React Mixin 的前世今生

摘要：但非常不幸，并不原生支持。這個單詞相信都很熟悉，高階函數在函數式編程是一個基本概念，它描述的是這樣一種函數，接受函數作為輸入，或是輸出一個函數。比如常用的工具方法都是高階函數。恰與的定義完全一致。這種不同很可能會導致問題的產生。在 React component 構建過程中，常常有這樣的場景，有一類功能要被不同的 Component 公用，然后看得到文檔經常提到 Mixin（混入） ...

姘存按 2019-08-21 10:49 評論0 收藏0
React.createClass和extends Component的區別

摘要：本質上是一個工廠函數，的方式更加接近最新的規范的寫法。兩種方式在語法上的差別主要體現在方法的定義和靜態屬性的聲明上。和的區別主要在于語法區別和狀態的區別區別語法區別后一種方法使用的語法，用構造器來構造默認的屬性和狀態。 createClass本質上是一個工廠函數，extends的方式更加接近最新的ES6規范的class寫法。兩種方式在語法上的差別主要體現在方法的定義和靜態屬性的聲明上。...

hlcc 2019-08-19 18:41 評論0 收藏0
React創建組件的三種方式及其區別

摘要：是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。當然，有三種手動綁定方法可以在構造函數中完成綁定，也可以在調用時使用來完成綁定，還可以使用來綁定。 React推出后，出于不同的原因先后出現三種定義react組件的方式，殊途同歸；具體的三種方式：函數式定義的無狀態組件 es5原生方式React.createClass定義的組件...

Towers 2019-08-23 12:41 評論0 收藏0
React 、 ES6 - 介紹（第一部分）

摘要：下一步我們將結果輸出到文件。這是我們用編寫的第一個非常簡單的組建。使用將創建的組建導出以便在其它地方能夠正常導入使用。這是React和ECMAScript6結合使用系列文章的第一篇。本文出自從零到壹全棧部落下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定（第三部分） ES6中Reac...

pingink 2019-08-20 17:59 評論0 收藏0