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

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

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

<DataProvider render={data => ( 
  <h1>Hello {data.target}</h1> 
)}/> 

我們給 這個子組件傳遞了一個叫 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é)果就是 <h1>Hello World</h1> 。有同學(xué)可能會有疑問，為什么要費這么大周折？直接把 h1 元素寫在 DataProvider 組件里不也可以嗎？

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

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

元素， 只不過樣式上加了 overflow-x: scroll 所以可以橫向滾動起來。產(chǎn)品同學(xué)說滾動區(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 ( 
             <ScrollView 
                ref="container" 
                horizontal={true} 
                onScroll={this.onScroll} 
             > 
                {list.map((item,i) => ( 
                    <ProductItem 
                        ref={`item-${i}`} 
                        data={item} 
                    /> 
                 ))} 
                  
             </ScrollView> 
             <Indicator list={list} active={activeIndicator} /> 
        ) 
    } 
} 

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 ( 
             <ScrollView 
                ref="container" 
                {...restProps} 
                onScroll={this.onScroll} 
             > 
                {list.map((item,i) => ( 
                    <div ref={`item-${i}`}>    
                        {children(item} 
                    </div> 
                 ))} 
                  
             </ScrollView> 
             <Indicator list={list} active={activeIndicator} /> 
        ) 
    } 
} 

然后我們的業(yè)務(wù)代碼就可以簡化了：

class demo extends Component { 
    state = { 
      list: [] 
    } 
    render() { 
        const { list } = this.state; 
        return ( 
              <ScrollViewWithIndicator 
                horizontal={true} 
                list={list} 
             > 
              {child => <ProductItem {...child} />}  //（*） 
             </ScrollViewWithIndicator> 
        ) 
    } 

仔細看業(yè)務(wù)代碼demo組件，我們一共給ScrollViewWithIndicator組件傳遞了多少個props？答案是三個！分別是horizontal, list ,children，大家千萬別忘了this.props.children也是一個props哦

再仔細看第(*)這句話，我們給ScrollViewWithIndicator組件傳遞一個叫children的prop，同時這個prop是一個函數(shù)，返回了一個組件（元素），這就是我們所說的render props啊

為什么list.map這個數(shù)組的遍歷要寫在ScrollViewWithIndicator組件內(nèi)部，而不是業(yè)務(wù)組件demo里呢？因為我們在onScroll 事件回調(diào)函數(shù)里要計算每一個商品item的位置，也就是要拿到商品item的ref屬性，所以把數(shù)組的遍歷寫在ScrollViewWithIndicator 組件內(nèi)部方便我們顯性給每一個商品item聲明ref屬性