React笔记_(6)_react语法5

react的版本


目前主要的react有 ES5,ES6.也有ES5和ES6混合编写的。比较混乱。

react官方提倡用ES6。

说到这里,就需要提到一个概念——mixin

mixin在es6中被摒弃掉了。

mixin:


简单来讲,就是部分公用的代码,提取出来作为一个独立的木块,

利用混入的方式来使用。这就是mixin。

es5里面,声明一个mixin单例对象,直接以数组方式插到组件使用即可;

es6不提倡这样的写法,而是使用高阶组件的方式实现。

高阶组件:

其实就是把一个类作为参数丢到另一个类(修饰类)中,

在这个类中将上一个类增加一点东西,然后再return返回去,

等于把上一个类的功能修饰增强了。

哎呀。概念好麻烦。还是看看代码怎么样实现吧。

首先说明一下实现思路。

1.我们用箭头函数,将组件类作为参数丢进去。

2.在这个函数内部,声明一个类,继承传进来的组件类。

3.加入新的属性和方法,然后返回类。

  

看下实现:

import React,{ Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
//待增强的类
class MyTest extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (<button onClick={this.show.bind(this,this.props)}>click</button>);
    }
}
//修饰函数,将类作为参数传入。
let IntervalEnhance = myComponent => {
//声明一个内部类。
// 注意,这个内部类不能有render方法,否则会将原类中的render覆盖。
    class ES6_Mixin extends myComponent {
        componentWillMount() {
            console.log("渲染前");
            this.timer = setInterval(function(){
                console.log(‘不断打印中.....‘);
            },500);
        }
       componentWillUnmount(){
             console.log("销毁啦!");
             clearInterval(this.timer);
       }
        show(obj){
            console.log(obj);
        }
    }
//修饰后返回
return ES6_Mixin;
};
var EnhancedTest = IntervalEnhance(MyTest);
ReactDOM.render(<EnhancedTest myname={"zhangwei"} />,document.getElementById(‘app‘));
//10s后销毁
setTimeout(function(){
    ReactDOM.unmountComponentAtNode(document.getElementById("app"));
},10000);

说明:

1.MyTest这个类,被增强了计时器功能和show()方法。最后,我们用增强后的类作为新组件类,渲染到页面上。

2.es5版的mixin对象里如果有相同的周期函数,是可以先加载mixin的,然后再加载组件本身的,之间并不会有覆盖

3.高阶组件的做法弱化了之前mixin的功能。

4.新式写法增强了代码的规范性

源代码说明:点此下载

时间: 2024-10-21 02:44:54

React笔记_(6)_react语法5的相关文章

React笔记_(1)_react概述

React概述   React是一种很好的前端技术. 它将应用打散成独立的小模块,然后进行组装,完成开发. react远比angularjs难学的多. react依赖的如webpack等各种工具得先学会使用,然后还重点了解和使用es6,然后才能进入其核心. 关于react的更多内容请参照以下内容和react的官方文档. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做

Effective C++ 阅读笔记_条款27 尽量少做转型动作

Effective C++ 阅读笔记_条款27 尽量少做转型动作 1.转型的三种形式,可以分为两大类. (1)旧式转型(old-style casts) (1.1) (T) expresstion (1.2) T (expression) (2) 新式转型(c++-style casts) (2.1)const_cast<T> (expression) (2.2)dynamic_cast<T> (expression) (2.3)reinterpret_cast<T>

Effective C++_笔记_条款08_别让异常逃离析构函数

(整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) C++并不禁止析构函数吐出异常,但它不鼓励你这样做.考虑如下代码: 1: class Widget{ 2: public: 3: ... 4: ~Widget() {...} //假设这个可能吐出一个异常 5: }; 6:  7: void doSomething() 8: { 9: vector<Widget> v ; //v在这里被自动销毁 10: ...

十五、Android学习笔记_授权过程

1.需要申请App Key和App Secret.不同的开发平台有不同的接入方式,可以参考文档,然后将这两个值放进去. 2.通过OAuth类实现认证,它会自动跳转到认证界面,进行授权,成功之后需要处理回调接口. 3.在第二步调用回调接口时,它会返回用户的基本信息,比如用户id.此时需要将用户id信息保存起来,为后面登录做准备.回调接口的写法就为myapp://AuthorizeActivity,其中scheme全部为小写字母. <activity android:name="com.wei

九、Android学习笔记_ Android开发中使用软引用和弱引用防止内存溢出

在<Effective Java 2nd Edition>中,第6条"消除过期的对象引用"提到,虽然Java有 垃圾回收机制,但是只要是自己管理的内存,就应该警惕内存泄露的问题,例如的对象池.缓存中的过期对象都有可能引发内存泄露的问题.书中还提到可以用 WeakHashMap来作为缓存的容器可以有效解决这一问题.之前也确实遇到过类似问题,但是没有接触过"弱引用"相关的问题,于是查阅了一些资料. <Java 理论与实践: 用弱引用堵住内存泄漏>

nsis安装包_示例脚本语法解析

以下是代码及解析,其中有底色的部分为脚本内容. 注释.!define.变量.!include.常量 ; Script generated by the HM NIS Edit Script Wizard. ; HM NIS Edit Wizard helper defines !define PRODUCT_NAME "signjing安装示例" !define PRODUCT_VERSION "0.0.0.1" !define PRODUCT_PUBLISHER

Effective C++_笔记_条款12_复制对象时勿忘其每一个成分

(整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 编译器会在必要时候为我们的classes创建copying函数,这些“编译器生成版”的行为:将被烤对象的所有成员变量都做一份拷贝. 如果你声明自己的copying函数,意思就是告诉编译器你并不喜欢缺省实现中的某些行为.编译器仿佛被冒犯似的,会以一种奇怪的方式回敬:当你的实现代码几乎必然出错时却不告诉你.所以自己实现copying函数时,请遵循一条规则:如果你为c

Effective C++_笔记_条款11_在operator=中处理“自我赋值”

(整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 为什么会出现自我赋值呢?不明显的自我赋值,是“别名”带来的结果:所谓“别名”就是“有一个以上的方法指涉对象”.一般而言如果某段代码操作pointers或references而它们被用来“指向多个相同类型的对象”,就需要考虑这些对象是否为同一个.实际上两个对象来自同一个继承体系,它们甚至不需要声明为相同类型就可能造成“别名”.因为一个base class的refe

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字 训练要点: 掌握使用DWR框架开发Ajax程序 使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `