react系列(9)混合mixins
来源:互联网 发布:淘宝代写代码靠谱不 编辑:程序博客网 时间:2024/05/29 06:56
混合是指定义一个对象,让组件去继承该对象的方法和状态的过程,该对象也被称为混合对象。若组件和被继承的混合对象具体相同的生命钩子函数将要被执行,则混合对象的函数会优先执行,然后再到组件内相同函数执行,但仅限于生命钩子函数。
另外,组件内不允许有和混合对象相同命名的方法(非生命钩子函数),如例子中的handlAction,否则会报错。ReactClassInterface: You are attempting to define `handlAction` on your component more than once. This conflict may be due to a mixin.
// 混合var mixinCommon = {componentWillMount: function() {console.log("mix componentWillMount!"); //优先执行},handlAction:function(){console.log("mix action!"); //该方法不允许再从组件中重构,否则会报错}}var HelloWorld = React.createClass({mixins:[mixinCommon],componentWillMount: function() {console.log("HelloWorld componentWillMount!"); //仍会执行},componentDidMount: function() { this.handlAction(); //调用mixinCommon的方法 }, render: function() { return <h1>Hello World!</h1>; }});ReactDOM.render(<HelloWorld />,document.getElementById("example"));
运行结果:
阅读全文
0 0
- react系列(9)混合mixins
- 4.Less混合(mixins)
- mixins混合
- React与ES6(四)ES6如何处理React mixins
- 浅谈React mixins
- SASS详解之混合(mixins)
- Sass中的mixins混合使用
- stylus之混合书写(Mixins)
- Vue中的mixins(混合)使用方法
- vue.js之mixins混合
- LESS详解之混合(Mixins)初级
- LESS详解之混合(Mixins)中级
- LESS详解之混合(Mixins)高级
- React中文教程 - Mixins | Traits(代码组合|代码复用机制)
- 《React-Native系列》38、 ReactNative混合组件封装
- 《React-Native系列》38、 ReactNative混合组件封装
- react混合受控组件
- react系列(8)refs
- MaxCompute有关优化复杂数据分布的实践
- ActiveMQ--异步发邮件Demo
- HttpClient详细解释
- Chinese Whisper 人脸聚类算法实现
- js/jq 点击按钮显示div,点击页面其他任何地方隐藏div
- react系列(9)混合mixins
- 让用户对产品上瘾,需要这4个环节
- ssm 中 ajax json
- Axure玩得不好?别怕!6周让你的Axure水平达到腾讯产品招聘要求
- ubuntu16.04 安装caffe 无GPU
- C++中break和continue的区别及注意事项
- 策略模式(Strategy)-----基于JAVA语言
- HBase shell scan 模糊查询
- 读书笔记:《设计模式解析》