什么是Render Props
“render prop”是指一種在React組件之間使用值為函數(shù)的prop共享代碼的技術(shù)

創(chuàng)新互聯(lián)建站主要業(yè)務(wù)有網(wǎng)站營銷策劃、成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、小程序設(shè)計、H5響應(yīng)式網(wǎng)站、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、營銷型網(wǎng)站資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

這個概念聽上去有點拗口，我們拆開了看它。

首先它本質(zhì)上是一個prop，是用來父子組件之間傳遞數(shù)據(jù)用的
其次這個prop傳遞的值是一個函數(shù)
最后它取名render props，是因為它通常是用來render(渲染)某個元素或組件
比如官網(wǎng)給出的示例：

 
 

  
  
 (
  
  
  
Hello {data.target}
  
  
)}/>
 
 

我們給 這個子組件傳遞了一個叫 render 的prop，這個prop的值是一個函數(shù)，它返回了一個 h1 元素。然后我們可以假裝實現(xiàn)一下這個 組件：

 
 

  
  
class DataProvider extends React.Component {
  
  
    state = {
  
  
        data: {
  
  
            target: 'World'
  
  
        }
  
  
    }
  
  
    render() {
  
  
        return this.props.render(this.state)
  
  
    }
  
  
}
 
 

最終我們的 DataProvider 組件渲染的結(jié)果就是

Hello World

這里就要講到代碼的可復(fù)用性了，假如下次我們希望 DataProvider 組件渲染的結(jié)果就是 Hello World 呢？難道又去修改 DataProvider 組件嗎？有了render props，我們就可以動態(tài)地決定 DataProvider 組件內(nèi)部要渲染的元素，同時這個元素還可以使用到 DataProvider 組件內(nèi)部的數(shù)據(jù)。

實際項目案例
下面講一個實際的項目案例，下圖中我們有一個橫向滾動的 ScrollView 組件，這個組件本身是個很普通的

元素， 只不過樣式上加了 overflow-x: scroll 所以可以橫向滾動起來。產(chǎn)品同學說滾動區(qū)域的下方要有進度點指示，從而告訴用戶總共有幾個產(chǎn)品，已經(jīng)現(xiàn)在滾到第幾個產(chǎn)品了。

明確了產(chǎn)品需求以后，我們就開始來實現(xiàn)，首先看下第一版：

 
 

  
  
class demo extends Component {
  
  
    state = {
  
  
      activeIndicator: 0,
  
  
      list: []
  
  
    }
  
  
    
  
  
    onScroll = () => {
  
  
        const { list } = this.state;
  
  
        const container = findDOMNode(this.refs.container);
  
  
        ...
  
  
        const itemVisibleLengthInContainer = list.map((item, index) => {
  
  
          const node = findDOMNode(this.refs[`item-${index}`]);
  
  
           ...
  
  
        });
  
  
        this.setState({
  
  
          activeIndicator: active,
  
  
        });
  
  
    };
  
  
    
  
  
    render() {
  
  
        const { list, activeIndicator } = this.state;
  
  
        return (
  
  
             
  
  
                ref="container"
  
  
                horizontal={true}
  
  
                onScroll={this.onScroll}
  
  
             >
  
  
                {list.map((item,i) => (
  
  
                    
  
  
                        ref={`item-${i}`}
  
  
                        data={item}
  
  
                    />
  
  
                 ))}
  
  
                 
  
  
             
  
  
             
  
  
        )
  
  
    }
  
  
}
 
 

ok，需求我們已經(jīng)實現(xiàn)了。實現(xiàn)邏輯就是給 ScrollView 組件添加一個 onScroll 事件，每當滾動的時候，會先計算 ScrollView 容器的位置信息，和每一個 ProductItem 的位置信息，算出現(xiàn)在哪個 ProductItem 在 ScrollView 容器中所占比例最高，從而得出現(xiàn)在應(yīng)該高亮的 activeIndicator 。

不過現(xiàn)在有個問題哦，給 ScrollView 組件增加進度指示器這個功能，更像是 ScrollView 組件應(yīng)該支持的一個功能，而不是直接寫在業(yè)務(wù)代碼里。所以我們應(yīng)該提供一個新組件 ScrollViewWithIndicator ，讓它去處理進度指示器的問題，從而跟業(yè)務(wù)解耦。

 
 

  
  
class ScrollViewWithIndicator extends Component {
  
  
    state = {
  
  
      activeIndicator: 0,
  
  
    }
  
  
    
  
  
    onScroll = () => {
  
  
        const { list } = this.props;
  
  
        const container = findDOMNode(this.refs.container);
  
  
        ...
  
  
        const itemVisibleLengthInContainer = list.map((item, index) => {
  
  
          const node = findDOMNode(this.refs[`item-${index}`]);
  
  
           ...
  
  
        });
  
  
        this.setState({
  
  
          activeIndicator: active,
  
  
        });
  
  
    };
  
  
    
  
  
    render() {
  
  
        const [{ list, children, ...restProps } , { activeIndicator }] = [this.props, this.state];
  
  
        return (
  
  
             
  
  
                ref="container"
  
  
                {...restProps}
  
  
                onScroll={this.onScroll}
  
  
             >
  
  
                {list.map((item,i) => (
  
  
                       
  
  
                        {children(item}