ReactJS-高阶组件 - 芒果文档

📌 相关文章

📜 ReactJS-高阶组件

📅 最后修改于: 2020-10-20 04:52:16 🧑 作者: Mango

高阶组件是JavaScript函数，用于向现有组件添加其他功能。这些函数是pure ，这意味着它们正在接收数据并根据该数据返回值。如果数据更改，则使用不同的数据输入重新运行高阶功能。如果我们想更新返回的组件，则不必更改HOC。我们需要做的就是更改函数使用的数据。

高阶组件（HOC）环绕“常规”组件，并提供其他数据输入。它实际上是一个函数，它接受一个组件，然后返回另一个包裹原始组件的组件。

让我们看一个简单的示例，以轻松理解此概念的工作原理。 MyHOC是一个高阶函数，仅用于将数据传递到MyComponent 。此函数采用MyComponent ，使用newData对其进行增强，并返回将在屏幕上呈现的增强组件。

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 ;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         
            {this.props.data}
         
      )
   }
}

export default MyHOC(MyComponent);

如果运行该应用程序，我们将看到数据已传递到MyComponent 。

反应HOC输出

注–高阶组件可以用于不同的功能。这些纯函数是函数编程的本质。一旦习惯了，您将注意到您的应用程序变得越来越易于维护或升级。