含义
render props 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
简单点说，就是用来关注功能一样，ui界面不一样 横向关注点。 这个其实不是一个新的知识，是在js 灵活继承上进行拓展的。
举个例子
官网举得那个例子蛮不错的，有兴趣的可以看一下
我举一个这样的场景，在编辑用户，我们需要一个用户数据的表单，然后在个人中心的时候，我们也需要一个用户的表单，但是这两个界面长的是布局啥的都不一样，无法达到界面复用。功能都是展示用户数据。
原理样例代码
import React, { PureComponent, ReactNode } from 'react' // 用户组件的属性 interface ICompRenderPropS { username: string, // 用户名 email: string, // 邮箱 address: string, // 地址 } // 定义接口 interface IProp { children: (data: ICompRenderPropS) => ReactNode; } /** * 处理用户逻辑的组件 */ class DealUserLogicComp extends PureComponent<IProp, ICompRenderPropS> { // 假设数据我已经获取到了 state = { username: 'aaaa', email: '123@abc.com', address: '北京市xxxx' } handleSave = () => { // 发送请求 // 保存数据 alert('保存了数据哦') } render() { return ( <div> // 这里直接使用默认的children属性，传入一个children是函数，并且把数据作为参数传递给其他界面不一样的组件 {this.props.children(this.state)} <button onClick={this.handleSave}>保存</button> </div> ) } } // 修改用户信息的界面 class UpdateUser extends PureComponent { // 不在里面直接使用函数的原因是，每一次调用组件的函数都是一个新的函数，比较浪费资源 handleUpdateUser = (data: ICompRenderPropS) => ( <div className='update-user'> <h1>修改用户信息</h1> <label > 用户名：<input type="text" defaultValue={data.username} /> </label> <label > 邮箱： <input type="text" defaultValue={data.email} /> </label> <label > 地址：<input type="text" defaultValue={data.address} /> </label> </div> ) render() { return ( <DealUserLogicComp> {this.handleUpdateUser} </DealUserLogicComp> ) } } // 注册用户的界面 class RegisterUser extends PureComponent { // 不在里面直接使用函数的原因是，每一次调用组件的函数都是一个新的函数，比较浪费资源 handleRegisterUser = (data: ICompRenderPropS) => ( <div className='update-user'> <h1>注册用户</h1> <div > 用户名：<input type="text" defaultValue={data.username} /> </div> <div > 邮箱： <input type="text" defaultValue={data.email} /> </div> <div > 地址：<input type="text" defaultValue={data.address} /> </div> </div> ) render() { return ( <DealUserLogicComp> {this.handleRegisterUser} </DealUserLogicComp> ) } } // 对外测试的代码 export default class TestComRenderProp extends PureComponent { render() { return ( <div> <UpdateUser/> <RegisterUser/> </div> ) } }
原理效果
分析：上面我们实现了一个保存用户数据的功能，但是界面却分为两种，一种是修改用户信息，另一种是注册用户。 这里我们使用的思路是：直接在父组件使用一个默认的子组件 children 并且传递的是一个函数，这个是不是有点像上下文的写法。然后来实现功能.而我们 render props 的原理也是这样的，只是提供了一个 render 属性。传入的也是一个函数。
render prop
render props 具体修改代码如下：
import React, { PureComponent, ReactNode } from 'react' // 用户组件的属性 interface ICompRenderPropS { username: string, // 用户名 email: string, // 邮箱 address: string, // 地址 } // 定义接口 interface IProp { render: (data: ICompRenderPropS) => ReactNode; } /** * 处理用户逻辑的组件 */ class DealUserLogicComp extends PureComponent<IProp, ICompRenderPropS> { // 假设数据我已经获取到了 state = { username: 'aaaa', email: '123@abc.com', address: '北京市xxxx' } handleSave = () => { // 发送请求 // 保存数据 alert('保存了数据哦') } render() { return ( <div> // 这里就不是children属性了，而是render 属性，如果使用ts,需要手动定义属性的类型 {this.props.render(this.state)} <button onClick={this.handleSave}>保存</button> </div> ) } } class UpdateUser extends PureComponent { // 不在里面直接使用函数的原因是，每一次调用组件的函数都是一个新的函数，比较浪费资源 handleUpdateUser = (data: ICompRenderPropS) => ( <div className='update-user'> <h1>修改用户信息</h1> <label > 用户名：<input type="text" defaultValue={data.username} /> </label> <label > 邮箱： <input type="text" defaultValue={data.email} /> </label> <label > 地址：<input type="text" defaultValue={data.address} /> </label> </div> ) render() { return ( // 这里就使用 render 属性来调用，记得传递一个函数哦 <DealUserLogicComp render={this.handleUpdateUser} /> ) } } class RegisterUser extends PureComponent { // 不在里面直接使用函数的原因是，每一次调用组件的函数都是一个新的函数，比较浪费资源 handleRegisterUser = (data: ICompRenderPropS) => ( <div className='update-user'> <h1>注册用户</h1> <div > 用户名：<input type="text" defaultValue={data.username} /> </div> <div > 邮箱： <input type="text" defaultValue={data.email} /> </div> <div > 地址：<input type="text" defaultValue={data.address} /> </div> </div> ) render() { return ( // 这里就使用 render 属性来调用，记得传递一个函数哦 <DealUserLogicComp render={this.handleRegisterUser} /> ) } } export default class TestComRenderProp extends PureComponent { render() { return ( <div> <UpdateUser/> <RegisterUser/> </div> ) } }
效果
分析，其实 render props 不是一个新的api,是基于js 的动态可拓展的基础上来进行延申出来的一种模式。功能一样，界面不一样的横向关注点. 有点网友要说，横向关注点我可以直接使用高阶组件 不就行了么，能想到这个的，确实厉害，高阶组件是对功能来进行拓展的，所以对界面拓展也是轻而易举的。
高阶组件
使用高阶组件进行拓展的代码：
import React, { PureComponent, ReactNode } from 'react' // 用户组件的属性 interface ICompRenderPropS { username: string, // 用户名 email: string, // 邮箱 address: string, // 地址 } // 定义接口 interface IProp { render: (data: ICompRenderPropS) => ReactNode; } /** * 高阶组件 * @param Comp */ function WidthDealUserLogicHoc(Comp: React.ComponentClass<ICompRenderPropS>) { return class DealUserLogicComp extends PureComponent<{}, ICompRenderPropS>{ // 假设数据我已经获取到了 state = { username: 'aaaa', email: '123@abc.com', address: '北京市xxxx' } /** * 保存数据的方法 */ handleSave = () => { // 发送请求 // 保存数据 alert('保存了数据哦') } render() { return ( <> <Comp {...this.state} /> <button onClick={this.handleSave}>保存</button> </> ) } } } // 修改用户的数据 class UpdateUser extends PureComponent<ICompRenderPropS> { render() { return ( <> <div className='update-user'> <h1>修改用户信息</h1> <label > 用户名：<input type="text" defaultValue={this.props.username} /> </label> <label > 邮箱： <input type="text" defaultValue={this.props.email} /> </label> <label > 地址：<input type="text" defaultValue={this.props.address} /> </label> </div> </> ) } } // 注册用户的组件 class RegisterUser extends PureComponent<ICompRenderPropS> { render() { return ( <> <div className='update-user'> <h1>注册用户</h1> <div > 用户名：<input type="text" defaultValue={this.props.username} /> </div> <div > 邮箱： <input type="text" defaultValue={this.props.email} /> </div> <div > 地址：<input type="text" defaultValue={this.props.address} /> </div> </div> </> ) } } // 使用方式 const WithUpdateUser = WidthDealUserLogicHoc(UpdateUser); const WithRegisterUser = WidthDealUserLogicHoc(RegisterUser); export default class TestComRenderPropHOC extends PureComponent { render() { return ( <div> <WithUpdateUser /> <WithRegisterUser /> </div> ) } }
效果
分析： 不管使用哪种方式，我们都能实现功能。在这里不是秀操作，是想边学边留下足迹，感叹react 真的非常灵活
