react進階組件之Render Props小結

前言

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組件的時候，能根據本身的需求靈活的調整哦。