摘要：返回元素的是將新的與原始元素的淺層合并后的結果。生命周期方法要如何對應到函數組件不需要構造函數。除此之外，可以認為的設計在某些方面更加高效避免了需要的額外開支，像是創(chuàng)建類實例和在構造函數中綁定事件處理器的成本。

React系列 --- 簡單模擬語法(一)
React系列 --- Jsx, 合成事件與Refs(二)
React系列 --- virtualdom diff算法實現分析(三)
React系列 --- 從Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement與Component部分源碼解析(五)
React系列 --- 從使用React了解Css的各種使用方案(六)

這是React初期提供的一種組合方案,通過引入一個公用組件,然后可以應用公用組件的一些生命周期操作或者定義方法,達到抽離公用代碼提供不同模塊使用的目的.

曾經的官方文檔demo如下

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return { seconds: 0 };
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Call a method on the mixin
  },
  tick: function() {
    this.setState({ seconds: this.state.seconds + 1 });
  },
  render: function() {
    return 
React has been running for {this.state.seconds} seconds.
;
  },
});

React.render(, document.getElementById("example"));

但是Mixins只能應用在createClass的創(chuàng)建方式,在后來的class寫法中已經被廢棄了.原因在于:

mixin引入了隱式依賴關系

不同mixins之間可能會有先后順序甚至代碼沖突覆蓋的問題

mixin代碼會導致滾雪球式的復雜性

詳細介紹mixin危害性文章可直接查閱Mixins Considered Harmful

HOC是一種React的進階使用方法,大概原理就是接收一個組件然后返回一個新的繼承組件,繼承方式分兩種

最基本的實現方式

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      return 
    }
  }
}

從代碼可以看出屬性代理方式其實就是接受一個 WrappedComponent 組件作為參數傳入，并返回一個繼承了 React.Component 組件的類，且在該類的 render() 方法中返回被傳入的 WrappedComponent 組件

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: "PropsProxyHOC",
      };
    }

    logName() {
      console.log(this.name);
    }

    render() {
      const newProps = {
        name: this.state.name,
        logName: this.logName,
      };
      return ;
    }
  };
}

class Main extends Component {
  componentDidMount() {
    this.props.logName();
  }

  render() {
    return 
PropsProxyHOC
;
  }
}

export default PropsProxyHOC(Main);

demo代碼可以參考這里
有種常見的情況是用來做雙向綁定

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { fields: {} };
    }

    getField(fieldName) {
      const _s = this.state;
      if (!_s.fields[fieldName]) {
        _s.fields[fieldName] = {
          value: "",
          onChange: event => {
            this.state.fields[fieldName].value = event.target.value;
            // 強行觸發(fā)render
            this.forceUpdate();
            console.log(this.state);
          },
        };
      }

      return {
        value: _s.fields[fieldName].value,
        onChange: _s.fields[fieldName].onChange,
      };
    }

    render() {
      const newProps = {
        fields: this.getField.bind(this),
      };
      return ;
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  render() {
    return ;
  }
}

export default PropsProxyHOC(Main);

demo代碼可以參考這里

因為這是一個被HOC包裝過的新組件,所以想要在HOC里面獲取新組件的ref需要用些特殊方式,但是不管哪種,都需要在組件掛載之后才能獲取到.并且不能在無狀態(tài)組件（函數類型組件）上使用 ref 屬性，因為無狀態(tài)組件沒有實例。

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      const newProps = {};
      // 監(jiān)聽到有對應方法才生成props實例
      typeof this.props.getInstance === "function" && (newProps.ref = this.props.getInstance);
      return ;
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  componentWillMount() {
    console.log("componentWillMount: ", this.wrappedInstance);
  }

  componentDidMount() {
    console.log("componentDidMount: ", this.wrappedInstance);
  }

  // 提供給高階組件調用生成實例
  getInstance(ref) {
    this.wrappedInstance = ref;
  }

  render() {
    return ;
  }
}

export default ParentComponent;

demo代碼可以參考這里

相比較上一方式,需要在高階組件提供設置賦值函數,并且需要一個props屬性做標記

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    // 返回ref實例
    getWrappedInstance = () => {
      if (this.props.withRef) {
        return this.wrappedInstance;
      }
    };

    //設置ref實例
    setWrappedInstance = ref => {
      this.wrappedInstance = ref;
    };

    render() {
      const newProps = {};
      // 監(jiān)聽到有對應方法才賦值props實例
      this.props.withRef && (newProps.ref = this.setWrappedInstance);
      return ;
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  componentWillMount() {
    console.log("componentWillMount: ", this.refs.child);
  }

  componentDidMount() {
    console.log("componentDidMount: ", this.refs.child.getWrappedInstance());
  }

  render() {
    return ;
  }
}

export default ParentComponent;

demo代碼可以參考這里

React.forwardRef 會創(chuàng)建一個React組件，這個組件能夠將其接受的 ref 屬性轉發(fā)到其組件樹下的另一個組件中。這種技術并不常見，但在以下兩種場景中特別有用：

轉發(fā) refs 到 DOM 組件

在高階組件中轉發(fā) refs

const FancyButton = React.forwardRef((props, ref) => (
  
    {props.children}
  
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
Click me!;

以下是對上述示例發(fā)生情況的逐步解釋：

我們通過調用 React.createRef 創(chuàng)建了一個 React ref 并將其賦值給 ref 變量。

我們通過指定 ref 為 JSX 屬性，將其向下傳遞給 。

React 傳遞 ref 給 fowardRef 內函數 (props, ref) => ...，作為其第二個參數。

我們向下轉發(fā)該 ref 參數到 ，將其指定為 JSX 屬性。

當 ref 掛載完成，ref.current 將指向

DOM 節(jié)點。

劫持渲染

最簡單的例子莫過于loading組件了

function PropsProxyHOC(WrappedComponent) {
  return class NewComponent extends React.Component {
    render() {
      return this.props.isLoading ? 
Loading...
 : ;
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

const HOCComponent = PropsProxyHOC(Main);

class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
    };
  }

  render() {
    setTimeout(() => this.setState({ isLoading: false }), 2000);
    return ;
  }
}

export default ParentComponent;

當然也能用于布局上嵌套在其他元素輸出
demo代碼可以參考這里

反向繼承（Inheritance Inversion）

最簡單的demo代碼

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    render() {
      return super.render();
    }
  };
}

在這里WrappedComponent成了被繼承的那一方,從而可以在高階組件中獲取到傳遞組件的所有相關實例

獲取繼承組件實例

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    componentDidMount() {
      console.log("componentDidMount: ", this);
    }

    render() {
      return super.render();
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  constructor() {
    super();
    this.state = {
      name: "WrappedComponent",
    };
  }

  render() {
    return 
Main
;
  }
}

export default InheritanceInversionHOC(Main);

demo代碼可以參考這里

修改props和劫持渲染

再講解demo之前先科普React的一個方法

React.cloneElement(
  element,
  [props],
  [...children]
)

以 element 元素為樣板克隆并返回新的 React 元素。返回元素的 props 是將新的 props 與原始元素的 props 淺層合并后的結果。新的子元素將取代現有的子元素，而來自原始元素的 key 和 ref 將被保留。
React.cloneElement() 幾乎等同于：

{children}

但是，這也保留了組件的 ref。這意味著當通過 ref 獲取子節(jié)點時，你將不會意外地從你祖先節(jié)點上竊取它。相同的 ref 將添加到克隆后的新元素中。

相比屬性繼承來說,反向繼承修改props會比較復雜一點

function InheritanceInversionHOC(WrappedComponent) {
  return class NewComponent extends WrappedComponent {
    constructor() {
      super();
      this.state = {
        a: "b",
      };
    }

    componentDidMount() {
      console.log("componentDidMount: ", this);
    }

    render() {
      const wrapperTree = super.render();
      const newProps = {
        name: "NewComponent",
      };
      const newTree = React.cloneElement(wrapperTree, newProps, wrapperTree.props.children);
      console.log("newTree: ", newTree);
      return newTree;
    }
  };
}

// 被獲取ref實例組件
class Main extends Component {
  render() {
    return 
Main
;
  }
}

export default InheritanceInversionHOC(Main);

demo代碼可以參考這里

為什么需要用到cloneElement方法?

因為render函數內實際上是調用React.creatElement產生的React元素,盡管我們可以拿到這個方法但是無法修改它.可以用getOwnPropertyDescriptors查看它的配置項

Focus the input