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更容易升级和进行代码维护。