ReactJS 高階組件

高階組件是用于向現(xiàn)有組件添加附加功能的JavaScript函數(shù)。這些函數(shù)是純函數(shù)，這意味著它們接收數(shù)據(jù)并根據(jù)這些數(shù)據(jù)返回值。如果數(shù)據(jù)發(fā)生變化，高階函數(shù)將使用不同的數(shù)據(jù)輸入重新運(yùn)行。如果我們想更新返回的組件，我們不必更改HOC。我們需要做的就是改變我們的函數(shù)正在使用的數(shù)據(jù)。

高階組件(Higher Order Component，HOC)環(huán)繞在“普通”組件周圍，并提供額外的數(shù)據(jù)輸入。它實(shí)際上是一個(gè)接受一個(gè)組件并返回包裝原始組件的另一個(gè)組件的函數(shù)。

讓我們來(lái)看一個(gè)簡(jiǎn)單的實(shí)例，以便理解這個(gè)概念是如何工作的。MyHOC 是一個(gè)高階函數(shù)，僅用于向 MyComponent 傳遞數(shù)據(jù)。該函數(shù)接受 MyComponent，使用 newData 對(duì)其進(jìn)行增強(qiáng)，并返回將在屏幕上呈現(xiàn)的增強(qiáng)組件。

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ùn)行該應(yīng)用程序，我們將看到數(shù)據(jù)已傳遞到MyComponent。

Note?高階組件可以用于不同的功能。這些純函數(shù)是函數(shù)編程的本質(zhì)。一旦習(xí)慣了，您會(huì)注意到您的應(yīng)用程序變得越來(lái)越易于維護(hù)或升級(jí)。