Time elapsed for interval: {this.props.seconds} ms
資訊專(zhuān)欄INFORMATION COLUMN
摘要：在的組建創(chuàng)建中，不太可能使用混合機(jī)制。在中，這個(gè)組建將被命名為。他們中的其中一個(gè)如下結(jié)論高階組建功能強(qiáng)大和極具表現(xiàn)力。現(xiàn)在高階組建廣泛的被使用來(lái)替代老式的句法。
這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第四篇。
下面是所有系列文章章節(jié)的鏈接：
React 、 ES6 - 介紹（第一部分）
React類(lèi)、ES7屬性初始化（第二部分）
React類(lèi)，方法綁定（第三部分）
ES6中React Mixins的使用（第四部分）
React 和ES6 之JSPM的使用（第五部分）
React 和 ES6 工作流之 Webpack的使用（第六部分）
本篇文章Github源碼
| React | JS |
|---|---|
當(dāng)我們使用React.createClass()時(shí)，你有可能使用所謂的混合開(kāi)發(fā)。它們?cè)试S插入一些額外的方法到React組建中。這個(gè)概念不只是針對(duì)React，它也存在于vanilla JS和其它的語(yǔ)言/框架中。
在ES6的React組建創(chuàng)建中，不太可能使用混合機(jī)制。我不會(huì)深入考慮這個(gè)決定的原因。如果你感興趣，你可以點(diǎn)擊下面的鏈接，了解更多.
About mixins in ES6 in official React blog
Mixins Are Dead. Long Live Composition by Dan Abramov
相反，我們將更加專(zhuān)注于具體的例子。
Higher-Order Components instead of Mixins我們將使用本系列文章中的part2中的 CartItem組建。你可以從這里獲取到源碼。
讓我們來(lái)看看如何伴隨其它的組建生成一個(gè)每秒加1的定時(shí)器。
為了更好的說(shuō)明，我們將不改變CartItem的代碼。我們重新提供新的組建，這個(gè)新的組建不會(huì)破壞CartItem的原始內(nèi)容。而是會(huì)在保持CartItem原始內(nèi)容的情況下，對(duì)CartItem增強(qiáng)一些額外的方法。
這聽(tīng)起來(lái)很神秘，跟著我，他會(huì)慢慢的變得更加清晰。
讓我們想象我們已經(jīng)有了IntervalEnhance組建：
import React from "react";
import { IntervalEnhance } from "./intervalEnhance";
class CartItem extends React.Component {
// component code here
}
export default IntervalEnhance(CartItem);
現(xiàn)在該是時(shí)候?qū)?b>IntervalEnhance組建了。我們將增加一個(gè)文件名為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
代碼解釋?zhuān)?/p>
Line 3.ComposedComponent => class extends React.Component部分的代碼等價(jià)于定義一個(gè)返回class的方法。ComposedComponent是我們希望增強(qiáng)的組建(在我們這個(gè)案例中，它是CartItem),通過(guò)使用export var IntervalEnhance，我們可以把整個(gè)方法作為IntervalEnhance(指向上面代碼中的CartItem)導(dǎo)出。
Line 5.幫助調(diào)試。在React DevTools中，這個(gè)組建將被命名為ComponentEnhancedWithIntervalHOC。
Lines 7-12. 初始化一個(gè)值為0，名字為seconds的狀態(tài)機(jī)變量。
Lines 14-26. 為這個(gè)組建提供啟動(dòng)和停止的生命周期函數(shù)。
Line 29. 在這里有很多感興趣的東西。這一行將給我的組建增加所有的state和props并且轉(zhuǎn)換成CartItem組建。同時(shí)，通過(guò)這行代碼的設(shè)置，在CartItem中我們將可以正常訪問(wèn)this.state.seconds屬性。
最后一步需要改變CartItem component的render方法。我們將在這個(gè)視圖上直接輸出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);
在瀏覽器中打開(kāi)這個(gè)頁(yè)面，你將看見(jiàn)每秒跳動(dòng)一次的label。
注意 - 沒(méi)有觸碰CartItem組建(通過(guò)render方法的分離)就全完全搞定！這就是高階組建的力量。
現(xiàn)在，請(qǐng)看看最后所有的代碼。如果代碼不清晰或者有問(wèn)題，很高興你能提供相應(yīng)的反饋。
Use ES7 Decorators instead of Mixins如果你喜歡ES7裝飾，可以使用一種熟悉的方式來(lái)使用他們。
首先，安裝babel-plugin-transform-decorators-legacy.
npm install --save-dev babel-plugin-transform-decorators-legacy
從GitHub repository獲取修改過(guò)的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中有不同的方法可以實(shí)現(xiàn)相同的功能。他們中的其中一個(gè)如下：
class Foo extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
}
render () {
return Helllo
}
}
結(jié)論
高階組建功能強(qiáng)大和極具表現(xiàn)力。現(xiàn)在高階組建廣泛的被使用來(lái)替代老式的mixin句法。隨時(shí)創(chuàng)建自己的機(jī)制來(lái)處理組件之間的混合功能。
參考文檔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
| 掃碼申請(qǐng)加入全棧部落 |
|---|
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83981.html
摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時(shí)，會(huì)保留上下文。我們能使用這個(gè)特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語(yǔ)法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類(lèi)、ES7屬性初始...
摘要：但非常不幸，并不原生支持。這個(gè)單詞相信都很熟悉，高階函數(shù)在函數(shù)式編程是一個(gè)基本概念，它描述的是這樣一種函數(shù)，接受函數(shù)作為輸入，或是輸出一個(gè)函數(shù)。比如常用的工具方法都是高階函數(shù)。恰與的定義完全一致。這種不同很可能會(huì)導(dǎo)致問(wèn)題的產(chǎn)生。 在 React component 構(gòu)建過(guò)程中，常常有這樣的場(chǎng)景，有一類(lèi)功能要被不同的 Component 公用，然后看得到文檔經(jīng)常提到 Mixin（混入） ...
摘要：本質(zhì)上是一個(gè)工廠函數(shù)，的方式更加接近最新的規(guī)范的寫(xiě)法。兩種方式在語(yǔ)法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。和的區(qū)別主要在于語(yǔ)法區(qū)別和狀態(tài)的區(qū)別區(qū)別語(yǔ)法區(qū)別后一種方法使用的語(yǔ)法，用構(gòu)造器來(lái)構(gòu)造默認(rèn)的屬性和狀態(tài)。 createClass本質(zhì)上是一個(gè)工廠函數(shù)，extends的方式更加接近最新的ES6規(guī)范的class寫(xiě)法。兩種方式在語(yǔ)法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。...
摘要：是以的形式來(lái)創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。當(dāng)然，有三種手動(dòng)綁定方法可以在構(gòu)造函數(shù)中完成綁定，也可以在調(diào)用時(shí)使用來(lái)完成綁定，還可以使用來(lái)綁定。 React推出后，出于不同的原因先后出現(xiàn)三種定義react組件的方式，殊途同歸；具體的三種方式： 函數(shù)式定義的無(wú)狀態(tài)組件 es5原生方式React.createClass定義的組件...
摘要：下一步我們將結(jié)果輸出到文件。這是我們用編寫(xiě)的第一個(gè)非常簡(jiǎn)單的組建。使用將創(chuàng)建的組建導(dǎo)出以便在其它地方能夠正常導(dǎo)入使用。 這是React和ECMAScript6結(jié)合使用系列文章的第一篇。 本文出自從零到壹全棧部落 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類(lèi)、ES7屬性初始化（第二部分） React類(lèi)，方法綁定（第三部分） ES6中Reac...
閱讀 2906·2021-09-22 15:54
閱讀 1899·2019-08-30 15:53
閱讀 2251·2019-08-29 16:33
閱讀 1429·2019-08-29 12:29
閱讀 1401·2019-08-26 11:41
閱讀 2380·2019-08-26 11:34
閱讀 2966·2019-08-23 16:12
閱讀 1431·2019-08-23 15:56
