React（7.2）--React ES6 處理 mixin

前言：

由於 mixin 有悖 JavaScript 語義化，React ES6 使用高階組件替代 Mixins。

這一節，我們將主要討論如何使用 高階組件 的方式取代傳統的 React Mixins。 那個我們怎麼使用 ES6 處理 mixin?

什麼是 高階組件 ?

通過函數向現有組件類添加邏輯，就是高階組件。

高階組件實際上只是一個方法，這個方法利用一個現有組件去返回另一個封裝它的組件。 我們看一下 React ES6 是如何? mixin 的

import React from 'react';//1、引入 HighterComponet 方法import {HighterComponet} from './HighterComponet';class Example extends React.Component {    //...略...}//2、export 高階組件封裝增強後的Exampleexport default HighterComponet(Example);

解析：我們把一些通用的邏輯處理放到 HighterComponet 方法中，而 Example 組件需要用到其中的邏輯處理。經過上面的處理後，export 出來的 Example 組件就包含了 HighterComponet 的邏輯處理，Example 就變成了一個高階組件（高階函數-回呼函數）。

然後我們再來看一下 HighterComponet 的內容：

import { Component } from "React" ;export const HighterComponet = (ComposedComponent) => class extends Component {    constructor() {        this.state = { data: null };    }    componentDidMount() {        this.setState({ data: 'Hello' });    }    render() {        return <ComposedComponent {...this.props} data={this.state.data} />;    }};

HighterComponet 就是一個方法，他的參數的一個組件。當傳入一個 Component 的時候，它將自動為該 Component 進行擴充並返回新的類定義。

上例中，就返回了一個擴充的 Component 類，為建構函式中添加了 state，也在 React 生命週期函數 componentDidMount中添加了處理邏輯，而 render 方法則使用了傳入的參數，完成了渲染。


我們再回頭看一下 Example 組件：

import  { Component }  from "React";import { HighterComponet } from "./HighterComponet ";class Example = class extends Component {      render() {          if (!this.props.data) return <div>Waiting...</div>;          return <div>{this.data}</div>;      }}export default HighterComponet (Example ); 

Example 僅僅知道別人會把資料通過 this.prop.data 傳進來，其他就都不關心了。可以看到，和 Mixins 的擴充方式相比，Example 的工作要輕鬆很多。