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

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

這個(gè)概念聽(tīng)上去有點(diǎn)拗口，我們拆開(kāi)了看它。

首先它本質(zhì)上是一個(gè)prop，是用來(lái)父子組件之間傳遞數(shù)據(jù)用的
其次這個(gè)prop傳遞的值是一個(gè)函數(shù)
最后它取名render props，是因?yàn)樗ǔＪ怯脕?lái)render(渲染)某個(gè)元素或組件
比如官網(wǎng)給出的示例：

 
 

  
  
 (
  
  
  
Hello {data.target}
  
  
)}/>
 
 

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

 
 

  
  
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，我們就可以動(dòng)態(tài)地決定 DataProvider 組件內(nèi)部要渲染的元素，同時(shí)這個(gè)元素還可以使用到 DataProvider 組件內(nèi)部的數(shù)據(jù)。

實(shí)際項(xiàng)目案例
下面講一個(gè)實(shí)際的項(xiàng)目案例，下圖中我們有一個(gè)橫向滾動(dòng)的 ScrollView 組件，這個(gè)組件本身是個(gè)很普通的

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

明確了產(chǎn)品需求以后，我們就開(kāi)始來(lái)實(shí)現(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)實(shí)現(xiàn)了。實(shí)現(xiàn)邏輯就是給 ScrollView 組件添加一個(gè) onScroll 事件，每當(dāng)滾動(dòng)的時(shí)候，會(huì)先計(jì)算 ScrollView 容器的位置信息，和每一個(gè) ProductItem 的位置信息，算出現(xiàn)在哪個(gè) ProductItem 在 ScrollView 容器中所占比例最高，從而得出現(xiàn)在應(yīng)該高亮的 activeIndicator 。

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