Mixins 改成使用高阶组件调用
把组件放在另外一个组件的 render 方法里面, 并且利用了 {...this.props} {...this.state} 这些 JSX 展开属性
对比下2种代码:
原始方式:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var intervalMixin = {
componentDidMount: function(){
this.arr = [];
},
setInterval: function(callback, interval){
var token = setInterval(callback, interval);
this.arr.push(token);
return token;
}
}
var S = React.createClass({
mixins: [intervalMixin],
getInitialState: function(){
return {
num: 0
}
},
componentDidMount: function(){
this.setInterval( ()=> this.setState({num: this.state.num+1}), 1000);
},
render: function(){
return <div>
{this.state.num}
</div>
}
});
ReactDOM.render(
<S q="bb" />,
document.getElementById('example') );
</script>
</body>
</html>
高阶组件调用:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 注意参数 Com 需要第1个字母大写
const Enhance = Com => {
const Res = class extends React.Component {
// 这种写法 ES6 不支持
// static defaultProps = {
// autoPlay: false,
// maxLoops: 10,
// }; // 注意这里有分号 constructor(props, context) {
super(props, context);
this.state = {
time: 0
};
} static a(){ } componentDidMount() {
setInterval(this.tick.bind(this), 1000);
} tick() {
this.setState({
time: this.state.time + 1
});
} render() {
// ...this.props 相当于 text = {this.props.text}
// ...this.state 相当于 time = {this.state.time}
return <Com {...this.props} {...this.state} />;
}
} Res.defaultProps = {
text: 'hello world'
}; return Res;
} class Time extends React.Component {
render() {
return <div>
{this.props.text} {this.props.time}
</div>;
}
} /*
注意这里 A 的值必须为大写,
不能写成 这种形式
ReactDOM.render(
Enhance(Time),
document.getElementById('example') );
)
*/
var A = Enhance(Time);
ReactDOM.render(
<A />,
document.getElementById('example') ); </script>
</body>
</html>
参考地址:
Mixins Are Dead. Long Live Composition
Mixins 改成使用高阶组件调用的更多相关文章
- 浅析为什么用高阶组件代替 Mixins
转载来源 感谢分享 Mixins 引入了无形的依赖 应尽量构建无状态组件,Mixin 则反其道而行之 Mixin 可能会相互依赖,相互耦合,不利于代码维护 不同的 Mixin 中的方法可能会相互冲突 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 高阶组件（Higher-Order Components）
有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步.但是其实这些名词背后所代表的东西其实很简单. 我不能说高阶组件就是这么一个东西.但是它是一个概念上很简单 ...
- 当初要是看了这篇，React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行
Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...
- React文档（二十四）高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- React进阶之高阶组件
前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...
- react高阶组件
高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
随机推荐
- 【HDU】2222 Keywords Search
[算法]AC自动机 [题解]本题注意题意是多少关键字能匹配而不是能匹配多少次,以及可能有重复单词. 询问时AC自动机与KMP最大的区别是因为建立了trie,所以对于目标串T与自动机串是否匹配只需要直接 ...
- Vue 使用中的小技巧（山东数漫江湖）
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心 ...
- Coursera在线学习---第八节.K-means聚类算法与主成分分析(PCA)
一.K-means聚类中心初始化问题. 1)随机初始化各个簇类的中心,进行迭代,直到收敛,并计算代价函数J. 如果k=2~10,可以进行上述步骤100次,并分别计算代价函数J,选取J值最小的一种聚类情 ...
- python进行机器学习（三）之模型选择与构建
Scikit-Learn库已经实现了所有基本机器学习的算法,可以直接调用里面库进行模型构建. 一.逻辑回归 大多数情况下被用来解决分类问题(二元分类),但多类的分类(所谓的一对多方法)也适用.这个算法 ...
- Linux 入门记录：八、Linux 文件系统
一.文件系统 操作系统通过文件系统管理文件及数据,磁盘或分区需要创建文件系统之后,才能被操作系统所用,创建文件系统的过程又称之为格式化.没有文件系统的设备又称之为裸设备(raw),某些环境会需要裸设备 ...
- Laravel 调试器 Debugbar 和数据库导出利器 DbExporter 扩展安装及注意事项
一.Debugbar安装 参考:Laravel 调试利器 —— Laravel Debugbar 扩展包安装及使用教程 的“2.安装”部分 二.DbExporter安装 参考:Laravel 扩展推荐 ...
- ftrace 的使用【转】
转自:http://blog.csdn.net/wang6077160/article/details/7814279 ftrace 的使用 ftrace 在内核态工作,用户通过 debugfs 接口 ...
- Centos_Lvm expand capacity without restarting CentOS
Rescan the new disk(/dev/sdb): #ls /sys/class/scsi_host/ host0 host1 host2 [root@db210_13:56:14 /dat ...
- codevs 3287 货车运输 NOIP2013提高组
题目链接:http://codevs.cn/problem/3287/ 题解: 和bzoj3732一毛一样,只不过是找最大生成树和最小值罢了,具体参见我的bzoj3732的博客 #include< ...
- pdf2htmlEX安装和配置
1.下载 安装的依赖: sudo yum install cmake gcc gnu-getopt java-1.8.0-openjdk libpng-devel fontforge-devel ca ...