ReactJS高階元件

高階元件是用於向現有元件新增附加函式的JavaScript函式。 這些函式是純粹的，這意味著他們接收資料並根據這些資料返回值。 如果資料改變，高階函式會以不同的資料輸入重新執行。 如果我們想更新返回元件，不必更改HOC。 所要做的就是改變函式使用的資料。

高階元件(HOC)環繞「正常」元件，並提供額外的資料輸入。 它實際上是一個函式，它接受一個元件並返回包裝原始元件的另一個元件。

下面來看看一個簡單的例子，以便理解這個概念是如何工作的。 MyHOC是一個高階函式，僅用於將資料傳遞給MyComponent。 這個函式使用MyComponent，用newData增強它，並返回將在螢幕上呈現的增強元件。

檔案：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);

如果執行應用程式，會看到資料被傳遞給MyComponent。

註 - 高階元件可以用於不同的功能。 這些純函式是函式式程式設計的本質。當習慣了它，你會注意到應用程式變得更容易維護或升級。