React高階組件HOC（三）繼承方式的高階組件

繼承方式的高階組件

採用繼承關聯做爲參數的組件和返回的組件，若是傳進來的參數組件爲WrappedComponent，那麼返回中的組件將會繼承於若是傳進來的參數組件爲WrappedComponent。

與代理方式的高階組件的區別

代理方式的高階組件

繼承方式的高階組件

從以上兩張圖中能夠看出有兩點區別

一、繼承方式的高階組件繼承於React.Component,而代理方式的高階組件直接繼承於傳入的組件參數。
二、返回值也是明顯不一樣的。繼承方式的高階組件須要把傳入組件返回出去，而代理方式的高階組件返回的是super.render()。

繼承方式的高階組件的應用

其有兩種操做：

一、操縱props。
二、操縱生命週期。

1.操縱props
首先建立一個繼承方式的高階組件D，經過如下方法實現操縱props。

import React from 'react'

const D = (WrappedComponent) => 
  class NewComp extends WrappedComponent {
    render() {
      // 獲取繼承而來的傳入組件的元素內容
      const element = super.render()
      // 對元素標籤判斷添加樣式屬性
      const newStyle = {
        color:element.type === 'div' ? 'red' : 'yellow',
        fontSize: '50px'
      }
      // 定義新的props
      const newProps = {...this.props, style: newStyle}
      // React.cloneElement方法生成新的React對象
      return React.cloneElement(element, newProps, element.props.children)
    }
  }

export default D

建立普通組件E傳入繼承高階組件D

import React, { Component } from 'react'
import D from './D'

@D
class E extends Component {
  render() {
    return (
      <div>我是E中div</div>
    )
  }
}

export default E

建立普通組件F傳入繼承高階組件D

import React, { Component } from 'react'
import D from './D'

@D
class F extends Component {
  render() {
    return (
      <p>我是F中p</p>
    )
  }
}
export default F

最終實現以下效果：

2.操縱生命週期
首先在componentWillMount生命週期內打個log。

import React, { Component } from 'react'
import D from './D'

@D
class E extends Component {
  componentWillMount() {
    console.log('我是E中生命週期')
  }
  render() {
    return (
      <div>我是E中div</div>
    )
  }
}

export default E

在控制檯能夠看到以下效果：

這個你們確定都是沒問題，看的很明白。

下面咱們在繼承高階組件D中輸入一樣內容：

import React from 'react'

const D = (WrappedComponent) => 
  class NewComp extends WrappedComponent {
    componentWillMount() {
      console.log('我是繼承高階組件D中生命週期')
    }

    render() {
      const element = super.render()
      const newStyle = {
        color:element.type === 'div' ? 'red' : 'yellow',
        fontSize: '50px'
      }
      const newProps = {...this.props, style: newStyle}
      return React.cloneElement(element, newProps, element.props.children)
    }
  }

export default D

在控制檯能夠看到以下效果：

哦吼，E中生命週期內容不見了，被繼承高階組件D給劫持了，這就是繼承高階組件操縱生命週期

結語

雖然本文詳細介紹了繼承高階組件，可是react 官方文檔已經不推薦你們去使用繼承方式的高階組件了。不要改變原始組件，使用組合即爲應該使用代理方式的高階組件。
詳細內容請觀看官網解釋：
https://zh-hans.reactjs.org/d...