React笔记_(6)_react语法5

时间:2022-03-14 00:43:31

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

源代码说明:点此下载