一、mixin
什么是mixin：創(chuàng)造一種類似多重繼承的效果。事實(shí)上，說它是組合更為貼切。
1.封裝mixin方法實(shí)例：
const mixin = function(obj,mixins){
????const newObj = obj;
????newObj.prototype = Object.create(obj.prototype);
????for(let prop in mixins){
????????if(mixins.hasOwnProperty(prop)){
????????????newObj.prototype[prop] = mixins[prop];
????????}
????}
????return newObj;
}
const BigMixin = {
????fly:()=>{
????????console.log('I can fly');
????}
}
const Big = function(){
????console.log('new big');
}
const FlyBig = mixin(Big,BigMixin); // new big
const flyBig = new FlyBig(); // I can fly?
對(duì)于廣義的mixin方法，就是用賦值的方式將mixin對(duì)象里的方法都掛載到原對(duì)象上，來實(shí)現(xiàn)對(duì)象的混入。
2.在React中使用mixin
React在使用createClass構(gòu)建組件時(shí)提供了mixin屬性。（ES6 classes形式構(gòu)建組件時(shí)，不支持mixin）
實(shí)例：
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin'; //官方封裝的mixin對(duì)象
React.creatClass({
? ? mixins:[PureRenderMixin],? ? reder(){
? ? ? ? return <div>foo</div>;
????}? ??
});
注：mixins屬性可以指定多個(gè)mixin。但，如果兩個(gè)mixin(也就是兩個(gè)對(duì)象)中有名稱相同的方法，會(huì)報(bào)命名沖突錯(cuò)誤。
使用createClass實(shí)現(xiàn)的mixin可以為組件做兩件事：
(1)定義工具方法。用mixin混入寫好的工具方法。在需要用到工具方法的組件中設(shè)置mixin，即可使用相應(yīng)工具方法。
(2)生命周期繼承，props、state的合并。如果多個(gè)mixin對(duì)象中，都定義了同一個(gè)生命周期，react會(huì)智能地將它們合并起來執(zhí)行。
3.ES6 Classes 與 decorator
es6 classes語法，用decorator實(shí)現(xiàn)mixin。
注：decorator與Java中pre-defined annotation的區(qū)別是，decorator是運(yùn)用在運(yùn)行時(shí)的方法。
4.mixin存在的問題
(1)破壞了原有組件的封裝。
? ? mixin中的方法會(huì)帶來新的state和props，及其他未知操作，在使用組件中不可知，無法有目的地控制。
(2)命名沖突。
? ? 多個(gè)mixin中，或mixin與當(dāng)前組件，可能存在相同命名的方法，從而命名沖突。
(3)增加復(fù)雜性。
? ? 當(dāng)添加了越來越多的mixin，就會(huì)引入越來越多的方法，從而造成代碼邏輯復(fù)雜，不易維護(hù)。
二、高階組件
1.高階函數(shù)：
概念：接受函數(shù)作為輸入，或是輸出一個(gè)函數(shù)，的函數(shù)。
如常用的map、reduce、sort等，都是高階函數(shù)。
2.高階組件
概念：類似于高階函數(shù)。接受React組件作為輸入，輸出一個(gè)新的React組件。
實(shí)現(xiàn)方法：
(1)屬性代理：高階組件通過被包裹的React組件來操作props。
定義高階組件：
import React,{Component} from 'React';
const MyContainer = (WrappedComponent) =>
? ? class extends Component {
? ? ? ? render() {
? ? ? ? ? ? return <WrappedComponent {...this.props} />;
????????}
????}
高階組件：MyContainer
被包裹組件：WrappedComponent
{...this.props}是WrappedComponent的props對(duì)象。除了原封不動(dòng)傳遞WrappedComponent的props，在高階組件中，可以設(shè)置其他props，并傳遞給WrappedComponent。例如：
import React,{Component} from 'React';
const MyContainer = (WrappedComponent) =>? ?
????class extends Component {? ? ? ?
????????render() {?
? ? ? ? ? ? ?const newProps = {
? ? ? ? ? ? ? ? ?text:newText,? ? ? ?
? ? ? ? ? ? ?};? ? ? ? ?
????????????return ?<WrappedComponent {...this.props} {...newProps} />;? ??
?//注：this.props讀取的是，調(diào)用WrappedComponent時(shí)傳入的props。注意{...this.props}和{...newProps}書寫的先后順序。如果this.props和newProps中有相同的prop，后面的會(huì)覆蓋前面的。
?????}???
?}
對(duì)于WrappedComponent來說，只要套用這個(gè)高階組件，我們的新組件中就會(huì)多一個(gè)text的prop。
使用高階組件：
import React,{Component} from 'React';
class MyComponent extends Component{
? ? //......
}
export default MyContainer(MyComponent);
或
import React,{Component} from 'React';
@MyContainer
class MyComponent extends Component{? ?
? ? render(){ }
}
export default?MyComponent;
生命周期執(zhí)行過程(類似于堆棧調(diào)用)：
didmount -> HOC didmount -> (HOCs didmount) ->?
(HOCs will unmount) -> HOC will unmount -> unmount
(2)反向繼承：高階組件繼承于被包裹的React組件。
定義高階組件：
const MyContainer = (WrappedComponent) =>
? ? class extends WrappedComponent {
? ? ? ? render(){
? ? ? ? ? ? return super.render();
????????}
? ? }
HOC調(diào)用順序(類似于隊(duì)列)：
didmount -> HOC didmount => (HOCs didmount) ->?
will unmount -> HOC will unmount -> (HOCs will unmount)
渲染劫持示例：
NO1:條件渲染
const MyContainer = (WrappedComponent) =>
????class extends WrappedComponent {
? ? ? ? render(){
? ? ? ? ? ? if(this.props.loggedIn){
? ? ? ? ? ? ? ? return super.render();
????????????}else{
? ? ? ? ? ? ? ? return null;
????????????}
????????}
????}
NO2:修改render輸出結(jié)果
const MyContainer = (WrappedComponent) =>
? ? class extends WrappedComponent {
? ? ? ? render(){
? ? ? ? ? ? const elementsTree = super.render();
? ? ? ? ? ? let newProps = {};
? ? ? ? ? ? if(elementsTree && elementsTree.type === 'input'){
? ? ? ? ? ? ? ? newProps = {value:'may the force be with you'};
????????????}
? ? ? ? ? ? const props = Object.assign({},elementsTree.props,newProps);
? ? ? ? ? ? const newElementsTree = ????????????????React.cloneElement(elementsTree,props,elementsTree.props.children);
? ? ? ? ? ? return newElementsTree;
????????}
????}
