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 高阶组件包装增强后的Example
export 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 的工作要轻松很多。