react中高階函數的常見使用方式？

高階函數

使用方式

• 在導出函數上面使用@HOC，@HOC function() {}
  • @HOC語法通過es7中decorator來實現的，需要配置babel來兼容才可以使用
• 導出時使用HOC進行包裹，export default HOC(HocComponent)

高階函數使應用場景

• 目的：把常用的邏輯獨出來進行多次復用
• 業務場景：在一個多頁H5中，部分頁面有查看權限，比如新聞列表，詳情，不需要進行任何操作就可以看。但是比如活動抽獎頁，如果想參加就需要驗證手機號登錄，當一些新用戶通過分享出去的鏈接進入活動頁時，需要彈出手機號登錄驗證消息彈窗，同理也有其他的頁面需要彈出這個彈窗
• 常規方式：每個需要彈出彈窗的頁面都寫一遍邏輯，但是當頁面數比較多時，就比較麻煩了，而且代碼有很多重復的
• 采用HOC：編寫一個攜帶彈窗邏輯的高階函數，在每個需要出現彈窗的頁面通過高階函數包裹一下需要導出的頁面組件，即可在頁面組件中調用彈窗出現的方法

原理

• 屬性代理方式原理
  • 向被處理的組件上添加獨立出來的屬性與方法，並返回一個包含原組件的新組件

高階組件使用注意事項

• 不要在render方法中使用HOC
• 復制靜態方法
• refs不會被傳遞

示例

• 當前示例中，高階函數定義了屬性與方法，並傳入到了新導出的組件中，可以在被高階函數包裝的組件中直接調用高階函數內部的屬性與方法，比如在HocComponent組件中調用高階函數HOC中的add方法

  import React from 'react'

  function HOC(WrapComponent) {
    function ChildComponent(props) {
      const add = (a, b) => {
        return a + b
      }
      const newProps = { type: 'hoc', add }
      return <WrapComponent {...props} {...newProps} />
    }
    return ChildComponent
  }

  // @HOC
  function HocComponent(props) {
    console.log(props) // { type: 'hoc', add: f(){} }
    const { add } = props
    console.log(add(1, 2))
    return (
      <div>HocPage</div>
    )
  }

  const newHocComponent = HOC(HocComponent)

  export default newHocComponent