React教程20: 更高次序的Components （Higher order components）

高次序的 components （Higher order components，HOC） 是用来添加额外的功能到已有的component上的 JavaScript functions。 这些功能是pure 的，意思是它们接受数据和根据数据返回相应的value。如果data改变了，更高次序的功能会重新用不同的data input来运行一遍。如果我们想更新我们返回的component，我们不需要改变我们的HOC。我们只需要改变我们function使用的data。

高次序component（Higher order component (HOC) ）被普通的icomponent 包裹起来，提供额外的data input。它实际上是个把一个component作为input，并返回另一个包裹了原有component的component。

这篇教程我们演示一个简单的例子帮助你理解HOC。 MyHOC 是一个只是用来传值到MyComponent的更高次序的function 。这个function输入 MyComponent , 加载了 newData 并返回render出加载了data的component。

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent ⇒ class extends React.Component {

   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }

   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};


class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

如果我们运行app，我们会看到data传入到了 MyComponent。

 

注意

高次序component可以有不同功能呢。这些 pure functions实际是functional programming。当你习惯了，你会发现app更容易升级和进行代码维护。