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