什麼是高階元件

高階元件，聽著好像很高大尚，但是其實高階元件就是一個函式的引數是元件，返回的是一個新的元件。那麼，高階元件有什麼好處呢，高階元件可以減少程式碼冗餘，把共有的程式碼提取出來，下面有個例子說明下：

import React from 'react'

function NewHigher(ComponentTest){
  class NewComponent extends React.Component {
    constructor() {
      super();
      this.state = {
          content: '我是內容'
 

      }
   }

    render() {
      return (
        <div>
           <h2>高階元件</h2>
           <ComponentTest content={this.state.content}/>
        </div>
      )
    }
  }

  return NewComponent

}

export default NewHigher;

NewHigher返回的就是高階元件

import React from 'react'
 
;
import NewHigher from './higherComponent.js'

class Test extends React.Component {
  render() {
    return (
      <div>
        <div>測試元件</div>
        <div>{this.props.content}</div>
      </div>
    )
  }
}

export default NewHigher(Test);

高階元件可以這麼理解吧，就是給現有元件設定一個父級，父級有的東西，現有元件都繼承了，所以我們可以把所有共有的東西放在這個高階元件中。在上面那個例子中，NewHigher就是父級，Test繼承了父級中的所有東西。