React教程20: 更高次序的Components

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

react-higher-order-components-output

 

注意

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


发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注