How to use React higher-order components

This time I will show you how to use React high-order components and what are the precautions when using React high-order components. The following is a practical case, let's take a look.

Some time ago when I was writing a Hybrid page at work, I encountered such a scenario. The company needed a series of active components, and when each component was registered, it needed to call an interface provided by the App. Several methods were considered at the beginning, including mixins, component inheritance, and react higher-order components. But after various considerations, we finally chose to use high-level components.

So what are advanced components? First of all, you must first understand that requesting classes in ES6 is just syntactic sugar, and the essence is prototypal inheritance. To better illustrate this, we will not modify the component's code. Instead, it provides components that wrap components and enhance them with additional functionality. We call such components higher-order components (Higher-Order Component).

1. Disadvantages of Mixins

React officially does not recommend the use of Mixins technology to achieve code reuse. Mixins technology has a series of shortcomings. First, Mixins will cause naming problems. Conflict, we inject Mixins in the following way:

var myMixins = require('myMixins');
var Button = React.createClass({
  mixins: [myMixins],
  
  // ...
})

If you need to inject multiple mixins, one of them is your own and the other may be a third-party. It is possible to use a method with the same name in two mixins, which will cause one of them to not work, and all you can do is change the name of one of the methods. On the other hand, a mixins may be very simple at first, only needing to implement a certain function, but when the business becomes more complex and more methods need to be added, it will become very complicated. To learn more about the shortcomings of mixins, you can check out the official blog.

2. Component inheritance

For myself, this method has been used more often. First, create a BaseComponent and implement a series of public methods in it. Each subsequent component inherits from this component, but the disadvantage is that it is not flexible enough. Only some relatively fixed methods can be implemented in the basic components, and there are great restrictions on the customization of each component.

3. React high-order components

Due to a series of shortcomings of mixins, React officials also realized that the pain points caused by using mixins are far higher than those caused by the technology itself. Advantages, high-order components can replace mixins, and it has richer uses when you go deeper.

Higher-order components (HOC) are advanced technologies in React that reuse component logic. But higher-order components themselves are not React APIs. It's just a pattern that arises inevitably from the compositional nature of React itself.

Higher-order functions

Speaking of high-order components, we must first talk about high-order functions. High-order functions are functions that at least meet the following conditions:

1. Accept one or more functions as input
2. Output a function

In javascript, a language where functions are first-class citizens, higher-order functions There are still many uses, such as our usual callback function, etc., all of which use the knowledge of high-order functions. Let’s first look at a simple higher-order function

var fun = function(x, y) {
  return x + y;
}

fun is a function, let’s pass the entire function as a parameter to another function

var comp = function(x, y, f) {
  return f(x,y);
}

Verify it

comp(1,2,fun) // 3

High-order component definition

Analogous to the definition of a high-order function, a high-order component accepts a component as a parameter, performs a series of processes on the component in the function, and then returns a new component. as return value.

We first define a high-order component BaseActivity

const BaseActivity = (WrappedComponent) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>我的包裹组件</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

The component accepts a wrapped component as a parameter and returns a processed anonymous component.

Use this high-order component in other components

class Example extends React.PureComponent {
 constructor(props) {
  super(props);
  this.state = {
   width: '100%',
   height: '100%'
  }
 }
 componentWillMount() {
  if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
   return;
  } else {
   this.setState({
    width: '375px',
    height: '640px'
   })
  }
 }
 render() {
  let { width, height } = this.state;
  return (
   <p className="activity">
    <p className="activity-content" style={{ width, height }}>
     <button className="btn">参加活动</button>
    </p>
   </p>
  )
 }
}
export default BaseActivity(Example);

The specific usage is to use the BaseActivity function to wrap the component when exporting the component, and look at the output react dom content

An anonymous component is wrapped outside the Example component.

Parameters

Since the higher-order component is a function, we can pass the parameters we need to it

const BaseActivity = (WrappedComponent, title) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

Export like this in Example

export default BaseActivity(Example, '这是高阶组件的参数');

Let’s take a look at the output react dom

可以看到参数已经传递进去了。

当然还可以这样用(柯里化)

const BaseActivity (title) => (WrappedComponent) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

在Example中这样export

export default BaseActivity('这是高阶组件的参数')(Example);

这种用法在ant-design的表单以及redux的connect中我们都可以看到

// ant
const WrappedDemo = Form.create()(Demo)
// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

高阶组件还可以扩展原组件的props属性，如下所示：

const BaseActivity (title) => (WrappedComponent) => {
 return class extends Component {
  render() {
   const newProps = {
     id: Math.random().toString(8)
   }
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent {...this.props} {...newProps}/>
    </section>
   )
  }
 }
}

看下输出的react dom

高阶组件的缺点

高阶组件也有一系列的缺点，首先是被包裹组件的静态方法会消失，这其实也是很好理解的，我们将组件当做参数传入函数中，返回的已经不是原来的组件，而是一个新的组件，原来的静态方法自然就不存在了。如果需要保留，我们可以手动将原组件的方法拷贝给新的组件，或者使用hoist-non-react-statics之类的库来进行拷贝。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用js获取ModelAndView值

如何使用jQuery做出文字超过规定行数自动加省略号

The above is the detailed content of How to use React higher-order components. For more information, please follow other related articles on the PHP Chinese website!