前言:
由于 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 的工作要轻松很多。