高階組件是用于向現(xiàn)有組件添加附加函數(shù)的JavaScript函數(shù)。 這些函數(shù)是純粹的,這意味著他們接收數(shù)據(jù)并根據(jù)這些數(shù)據(jù)返回值。 如果數(shù)據(jù)改變,高階函數(shù)會以不同的數(shù)據(jù)輸入重新運行。 如果我們想更新返回組件,不必更改HOC
。 所要做的就是改變函數(shù)使用的數(shù)據(jù)。
高階組件(HOC)環(huán)繞“正?!苯M件,并提供額外的數(shù)據(jù)輸入。 它實際上是一個函數(shù),它接受一個組件并返回包裝原始組件的另一個組件。
下面來看看一個簡單的例子,以便理解這個概念是如何工作的。 MyHOC
是一個高階函數(shù),僅用于將數(shù)據(jù)傳遞給MyComponent
。 這個函數(shù)使用MyComponent
,用newData
增強它,并返回將在屏幕上呈現(xiàn)的增強組件。
文件:App.jsx -
import React from 'react';
var newData = {
data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
componentDidMount() {
this.setState({
data: newData.data
});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
};
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.data}</h1>
</div>
)
}
}
export default MyHOC(MyComponent);
如果運行應(yīng)用程序,會看到數(shù)據(jù)被傳遞給MyComponent
。
注 - 高階組件可以用于不同的功能。 這些純函數(shù)是函數(shù)式編程的本質(zhì)。當(dāng)習(xí)慣了它,你會注意到應(yīng)用程序變得更容易維護(hù)或升級。