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=