详解React的回调渲染模式


Posted in Javascript onSeptember 10, 2020

一、一个简单的小例子

1.父组件

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Badge info={user} />}
</Twitter>

2.子组件框架

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
 // finish this
}

3.子组件具体实现

import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
class Twitter extends Component {
 state = {
  user: null,
 }
  static propTypes = {
  username: PropTypes.string.isRequired,
 }
  componentDidMount() {
  fetchUser(this.props.username).then(user => this.setState({user}));
 }
  render() {
  return this.props.children(this.state.user);
 }
}

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

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Profile info={user} />}
</Twitter>

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

Javascript 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php递归json类实例
2014/12/02 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
安卓程序员求职信
2014/02/28 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
爱护草坪标语
2014/06/24 职场文书
助残日活动总结
2014/08/27 职场文书
2015年质检工作总结
2015/05/04 职场文书
党员干部学习心得体会
2016/01/23 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python