微客导航 » 文章资讯 » 详解React的回调渲染模式

详解React的回调渲染模式

2023-07-16 21:45:06 266

一、一个简单的小例子

1.父组件


{(user)=>user===null
?
:}

2.子组件框架

importReact,{Component,PropTypes}from'react'
importfetchUserfrom'twitter'
//fetchUsertakeinausernamereturnsapromise
//whichwillresolvewiththatusername'sdata.
classTwitterextendsComponent{
//finishthis
}

3.子组件具体实现

importReact,{Component,PropTypes}from'react';
importfetchUserfrom'twitter';
classTwitterextendsComponent{
state={
user:null,
}
staticpropTypes={
username:PropTypes.string.isRequired,
}
componentDidMount(){
fetchUser(this.props.username).then(user=>this.setState({user}));
}
render(){
returnthis.props.children(this.state.user);
}
}

这种模式的优势在于将父组件与子组件解耦和，父组件可以直接访问子组件的内部状态而不需要再通过Props传递，这样父组件能够更为方便地控制子组件展示的UI界面。譬如产品经理让我们将原本展示的Badge替换为Profile，我们可以轻易地修改下回调函数即可：


{(user)=>user===null
?
:}

到此这篇关于详解React的回调渲染模式的文章就介绍到这了,更多相关React回调渲染内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

详解React的回调渲染模式

热门推荐

随机推荐