成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React系列之一起認(rèn)識(shí)Render Prop

LMou / 394人閱讀

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

1.mixins

寫過react項(xiàng)目的應(yīng)該都碰到過，不同組件復(fù)用相同代碼的問題，在react早期使用React.createClass創(chuàng)建組件的時(shí)代，我們經(jīng)常使用的是mixins來實(shí)現(xiàn)代碼復(fù)用。比如有個(gè)組件A，它用來實(shí)時(shí)的獲取鼠標(biāo)的位置。

//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"))

如果此時(shí)有個(gè)組件B也想集成這個(gè)功能，我們可以通過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了，因?yàn)閑s6普及了呀！


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

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

命名空間，多個(gè)mixins修改同一個(gè)state導(dǎo)致的命名沖突。

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坐標(biāo)
      const { x, y } = this.props.mouse

      return (
        

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

        

      )
    }
}

//把App組件當(dāng)做參數(shù)傳到withMouse方法里面，在withMouse內(nèi)部通過props獲得x、y坐標(biāo)值
const AppWithMouse = withMouse(App)

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

看起來很不錯(cuò)的樣子！


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

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

命名空間的沖突，這個(gè)問題依然存在，props里屬性名可能會(huì)被多個(gè)HOC重復(fù)使用。

我的天.....

3.Render Prop

幸運(yùn)女神降臨！
mmp，前面都是炮灰，到了劃重點(diǎn)的時(shí)候啦！

Render Prop是個(gè)值為函數(shù)的屬性，通過Render Prop，組件知道什么應(yīng)該被渲染

很糊涂是不是，看代碼

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

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

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

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

好了！大功完成了，歡迎一起討論學(xué)習(xí)~

個(gè)人博客地址：意卿

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93042.html

相關(guān)文章

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

    摘要：組件裝載過程裝載過程依次調(diào)用的生命周期函數(shù)中每個(gè)類的構(gòu)造函數(shù)，創(chuàng)造一個(gè)組件實(shí)例，當(dāng)然會(huì)調(diào)用對(duì)應(yīng)的構(gòu)造函數(shù)。組件需要構(gòu)造函數(shù)，是為了以下目的初始化，因?yàn)樯芷谥腥魏魏瘮?shù)都有可能訪問，構(gòu)造函數(shù)是初始化的理想場(chǎng)所綁定成員函數(shù)的環(huán)境。 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---之React（三）組件的生...

    geekzhou 評(píng)論0 收藏0

  • React手稿之類型檢查

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

    tomorrowwu 評(píng)論0 收藏0

  • React系列---React（二）組件的prop和state

    摘要：給賦值也是構(gòu)造函數(shù)的工作之一。在的構(gòu)造函數(shù)中，還給兩個(gè)成員函數(shù)綁定了當(dāng)前的執(zhí)行環(huán)境，因?yàn)榉绞絼?chuàng)建的組件并不自動(dòng)給我們綁定到當(dāng)前實(shí)例對(duì)象。我們可以利用的功能，避免判斷邏輯這種充斥在構(gòu)造函數(shù)之中，讓代碼更優(yōu)。 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 組件是React...

    Labradors 評(píng)論0 收藏0

  • 源碼解析 —— Vue的響應(yīng)式數(shù)據(jù)流

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

    LuDongWei 評(píng)論0 收藏0

  • 少婦白潔系列之React StateUp Pattern, Explained

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

    20171112 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LMou

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<