最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【整理】React中的HOC=Higher Order Component

ReactJS crifan 328浏览 0评论

后来才知道:

原来之前是:

对已有的class,进行扩展,添加新的功能(方法等),是通过mixins的方法:

React/React Native 的ES5 ES6写法对照表 | 论坛 – React Native中文社区

Mixins
在ES5下,我们经常使用mixin来为我们的类添加一些新的方法,譬如PureRenderMixin
var PureRenderMixin = require(‘react-addons-pure-render-mixin’);
React.createClass({
  mixins: [PureRenderMixin],
  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});
然而现在官方已经不再打算在ES6里继续推行Mixin,他们说:Mixins Are Dead. Long Live Composition
尽管如果要继续使用mixin,还是有一些第三方的方案可以用,譬如这个方案
不过官方推荐,对于库编写者而言,应当尽快放弃Mixin的编写方式,上文中提到Sebastian Markbåge的一段代码推荐了一种新的编码方式:
//Enhance.js
import { Component } from “React”;
export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: ‘Hello’ });
    }
    render() {
        return <ComposedComponent {…this.props} data={this.state.data} />;
    }
};
//HigherOrderComponent.js
import { Enhance } from “./Enhance”;
class MyComponent {
    render() {
        if (!this.data) return <div>Waiting…</div>;
        return <div>{this.data}</div>;
    }
}
export default Enhance(MyComponent); // Enhanced component
用一个“增强函数”,来某个类增加一些方法,并且返回一个新类,这无疑能实现mixin所实现的大部分需求。

现在不推荐了,改用HOC去实现了。

官网的HOC的解释:

Higher-Order Components – React

所以终于基本明白了啥是HOC了。

具体用法,以后再说。

转载请注明:在路上 » 【整理】React中的HOC=Higher Order Component

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
63 queries in 0.078 seconds, using 9.45MB memory