React系列之一起認識Render Prop

LMou 發(fā)布于2019-08-22 14:58 / 387人閱讀

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

1.mixins

寫過react項目的應(yīng)該都碰到過，不同組件復(fù)用相同代碼的問題，在react早期使用React.createClass創(chuàng)建組件的時代，我們經(jīng)常使用的是mixins來實現(xiàn)代碼復(fù)用。比如有個組件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(高階組件)的概念被提出來，什么是高階組件？說白了其實就是把函數(shù)當做參數(shù)傳入到另一個函數(shù)中，在我們展開高階組件前，我們先來想想除了因為es6的普及react不再支持mixins之外，mixins還有啥其它缺點不。當然是有的，有以下幾點：

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

命名空間，多個mixins修改同一個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坐標
      const { x, y } = this.props.mouse

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

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

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

看起來很不錯的樣子！

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

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

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

我的天.....

3.Render Prop

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

Render Prop是個值為函數(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"))

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

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

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

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

個人博客地址：意卿