React笔记__react语法5

Posted 2020-08-24 风来风往风伤

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.新式写法增强了代码的规范性

 

源代码说明:点此下载