## 前言 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组件的时候，能根据自己的需求灵活的调整哦。