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);

如果運行應用程序,會看到數據被傳遞給MyComponentReactJS高階組件

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