React系列之一起認識Render Prop

LMou 發布于2019-08-22 14:58 / 397人閱讀

摘要：比如有個組件，它用來實時的獲取鼠標的位置。命名空間，多個修改同一個導致的命名沖突。據說源碼里面為每個組件增加路由屬性就是通過該方法好了大功完成了，歡迎一起討論學習個人博客地址意卿

1.mixins

寫過react項目的應該都碰到過，不同組件復用相同代碼的問題，在react早期使用React.createClass創建組件的時代，我們經常使用的是mixins來實現代碼復用。比如有個組件A，它用來實時的獲取鼠標的位置。

//A組件
import React from "react"
import ReactDOM from "react-dom"

const App = React.createClass({
  getInitialState() {
    return { x: 0, y: 0 }
  },

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  },

  render() {
    const { x, y } = this.state

    return (
      
        The mouse position is ({x}, {y})
      
    )
  }
})

ReactDOM.render(, document.getElementById("app"))

如果此時有個組件B也想集成這個功能，我們可以通過mixins，代碼是這樣的

//B組件
import React from "react"
import ReactDOM from "react-dom"

const MouseMixin = {
  getInitialState() {
    return { x: 0, y: 0 }
  },

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
}

const App = React.createClass({
  // Use the mixin!
  mixins: [ MouseMixin ],
  
  render() {
    const { x, y } = this.state

    return (
      
        The mouse position is ({x}, {y})
      
    )
  }
})

ReactDOM.render(, document.getElementById("app"))

很容易是吧~但委屈的是react16之后就不再支持mixins了，因為es6普及了呀！

那怎么辦呢？辦法總是有的，HOC(高階組件)的概念被提出來，什么是高階組件？說白了其實就是把函數當做參數傳入到另一個函數中，在我們展開高階組件前，我們先來想想除了因為es6的普及react不再支持mixins之外，mixins還有啥其它缺點不。當然是有的，有以下幾點：

難以溯源，mixins修改state，在組件內部你無法知道state從哪來，尤其是有多個mixins的情況。

命名空間，多個mixins修改同一個state導致的命名沖突。

2.HOC(高階組件)

所以為了代替mixins，很多人就提出了HOC(高階組件)，代碼是下面這樣的。

import React from "react"
import ReactDOM from "react-dom"

const withMouse = (Component) => {
  return class extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        
          
        
      )
    }
  }
}

class App extends React.Component{
    render() {
      // 代替直接處理state,我們從props里獲得x,y坐標
      const { x, y } = this.props.mouse

      return (
        
            The mouse position is ({x}, {y})
        
      )
    }
}

//把App組件當做參數傳到withMouse方法里面，在withMouse內部通過props獲得x、y坐標值
const AppWithMouse = withMouse(App)

ReactDOM.render(, document.getElementById("app"))

看起來很不錯的樣子！

但是，回到之前mixins存在的問題，我們想一想，HOC有上述的問題么？我們來看下：

難以溯源，跟mixins不同的是，我們不再糾結state的源頭，我們現在要糾結的是HOC的props里提供了些啥...

命名空間的沖突，這個問題依然存在，props里屬性名可能會被多個HOC重復使用。

我的天.....

3.Render Prop

幸運女神降臨！
mmp，前面都是炮灰，到了劃重點的時候啦！

Render Prop是個值為函數的屬性，通過Render Prop，組件知道什么應該被渲染

很糊涂是不是，看代碼

import React from "react"
import ReactDOM from "react-dom"
import PropTypes from "prop-types"

class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired
  }

  state = { x: 0, y: 0 }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }

  render() {
    return (
      
        {this.props.render(this.state)}
      
    )
  }
}

const App = React.createClass({
  render() {
    return (
      
         (
          The mouse position is ({x}, {y})
        )}/>
      
    )
  }
})

ReactDOM.render(, document.getElementById("app"))

看明白了么，這里我們通過定義一個render屬性，值是個函數，描述了我們想要渲染的元素，然后在子組件里面調用該render方法，再回頭看下之前的兩個問題，難以溯源，現在主動權在父組件上，我要什么數據你們給我拿來就行了，你們子組件各自去實現，我只要結果不要過程，因而就不存在數據來源問題，命名空間的問題也沒了。好厲害~~~。
最后偷偷的告訴你們一個更厲害的，上面的render方法里面我們是直接寫出了渲染x,y值，只適用于當前App組件，我們可以通過高階組件來達到為任何組件添加該功能，代碼是這樣的。

const withMouse = (Component) => {
    return class extends React.Component{
        render() {
            return (
                
            )}/>
        }
    }
}

據說react-router源碼里面為每個組件增加路由屬性就是通過該方法！

好了！大功完成了，歡迎一起討論學習~

個人博客地址：意卿

云服務器 GPU云服務器系列之系列之二架構之坑系列云上城之歌不同服務器可以一起玩嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93042.html

React系列---React（三）組件的生命周期

摘要：組件裝載過程裝載過程依次調用的生命周期函數中每個類的構造函數，創造一個組件實例，當然會調用對應的構造函數。組件需要構造函數，是為了以下目的初始化，因為生命周期中任何函數都有可能訪問，構造函數是初始化的理想場所綁定成員函數的環境。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---之React（三）組件的生...

geekzhou 2019-08-20 17:33 評論0 收藏0
React手稿之類型檢查

摘要：類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用或者來實現。示例以上內容在實現一個通用組件時非常有用。類型檢查和參數默認值一起使用，保證組件的正常運行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用Flow或者TypeScript來實現。 React提供了PropTypes來檢查類型。示例： imp...

tomorrowwu 2019-08-26 12:24 評論0 收藏0
React系列---React（二）組件的prop和state

摘要：給賦值也是構造函數的工作之一。在的構造函數中，還給兩個成員函數綁定了當前的執行環境，因為方式創建的組件并不自動給我們綁定到當前實例對象。我們可以利用的功能，避免判斷邏輯這種充斥在構造函數之中，讓代碼更優。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期組件是React...

Labradors 2019-08-20 17:33 評論0 收藏0
源碼解析 —— Vue的響應式數據流

摘要：下面我們會向大家解釋清楚為什么這個這么重要，以及它和的響應式數據流有什么關系。源碼前面鋪墊這么多就是希望大家能理解接下來要講的響應式數據流。總結講到這里大家應該都能夠明白的響應式數據流是如何實現的。 Vue、React介紹目前前端社區比較推崇的框架有Vue 和 React，公司內部許多端都自發的將原有的老技術方案（widget + jQuery）遷移到 Vue / React上了。我...

LuDongWei 2019-08-20 12:32 評論0 收藏0
少婦白潔系列之React StateUp Pattern, Explained

摘要：本文用于闡述模式的算法和數學背景，以及解釋了它為什么是里最完美的狀態管理實現。歡迎大家討論和發表意見。本文用于闡述StateUp模式的算法和數學背景，以及解釋了它為什么是React里最完美的狀態管理實現。關于StateUp模式請參閱：https://segmentfault.com/a/11... P-State, V-State 如果要做組件的態封裝，從組件內部看，存在兩種不同的...

20171112 2019-08-20 14:50 評論0 收藏0