## 前言 Render props作為共享組件邏輯的一種有效模式，此模式借助state和輔助參數，可以提供ui的更好的靈活性。 ## render funtion 在我們的組件中，我們都需要定義一個render方法，在這個方法中定義我們需要渲染的部分。 ``` // 之前 render(){ const {on} = this.state return <Switch on={on} onClick={this.toggle} /> } // 之后 renderUI() { const {on} = this.state return <Switch on={on} onClick={this.toggle} /> } render() { return this.renderUI() } ``` ## 優化renderUI為純函數 不依賴于組件，參數全部依賴傳入 ``` const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} /> render(){ return this.renderUI({ on:this.state.on, toggle:this.toggle }) } ``` ## 移出外部使用仍然是可以的 ``` // 組件外 const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} /> // 組件 class Toggle extend React.Component{ state = { on :false} toggle = ()=> this.setState( ({on}) => ({on:!on}), () =>{ this.props.onToggle(this.state.on) } ) // 組件內 render(){ return this.renderUI({ on:this.state.on, toggle:this.toggle }) } } ``` ## 定義默認配置 那么基于以上的認知，我們可以進一步把渲染組件的部分通過屬性得到。設置一個默認屬性。 ``` static defaultProps = {renderUI} render(){ return this.props.renderUI({ on:this.state.on, toggle:this.toggle }) } ``` ## 自定義拓展配置 在定義好render部分可以依賴于外部render屬性之后，我們可以自定義渲染，加入自己想要的渲染dom。我們定義一個Usage的方法。 在這個方法中，我們可以更加靈活的根據自己的需求，在原來的組件基礎上加上自己需要的自定義渲染。 ``` function Usage({ onToggle = (aregs) => console.log('Ontoggle',...aregs) }){ return ( <Toggle onToggle={onToggle} renderUI = {(on,toggle)=>( <div> { on ? 'button is on' : 'button is off'} <Switch on={on} onClick={toggle} /> <button onClick={toggle}>{on? 'on': 'off'}</button> </div> ) }> </Toggle>) } ``` ## props.children 也是可以的 如果你覺得上面的方式不是很好，你也可以通過children的方式來自定義使用render的部分。 ``` // 組件內 class Toggle extends React.Component{ render(){ this.props.children({ on:this.state.on, toggle:this.toggle }) } } function Usage({ onToggle = (aregs) => console.log('Ontoggle',...aregs) }){ return (<Toggle onToggle={onToggle} > {(on,toggle)=>( <div> { on ? 'button is on' : 'button is off'} <Switch on={on} onClick={toggle} /> <button onClick={toggle}>{on? 'on': 'off'}</button> </div> ) } </Toggle>) } ``` ## 解構出一種常用的toggle組件使用 ``` function CommonToggle(props) { return( <Toggle {...props}> {({on, toggle}) => <Switch on={on} onClick={toggle} />} ) } ``` ## 小結 以上就是關于render props模式關于共享組件ui渲染部分的進階常識，你Get了么？希望在我們業務組件或者ui組件的時候，能根據自己的需求靈活的調整哦。