react hoc_如何使用HOC模式开发React超能力

react hoc

Hey everyone! ? I hope you had a Merry, Merry Christmas and a Happy New Year!

嘿大家！ ？ 希望您过得愉快，圣诞快乐，新年快乐！

2018 has reached its end and it makes sense for me to start the new year with an article about Higher-Order Components!

2018年即将结束，对于我来说有意义的是以关于高阶组件的文章开始新的一年！

I’ve promised you to write about it since we’ve approached the subject when we’ve talked about the render props and the container patterns so it makes sense to deep dive a little bit and pay attention to it!

我已经答应过您，因为我们在谈到渲染道具和容器模式时已经接近了这个主题，因此有必要深入研究并注意它！

Personally it’s not one of my favourite patterns, but it’s a powerful tool to know, master and hang on your tool belt.

就个人而言，这不是我最喜欢的模式之一，但它是了解，掌握和掌握工具带的强大工具。

Just keep in mind that you should not overuse it. Almost everything that you can encapsulate in a HOC you can certainly implement using the render props pattern — check my article about render props here — and vice-versa.

请记住，您不应过度使用它。 几乎所有的东西，你可以在一个HOC封装可以使用道具呈现一定模式实施-检查我的约渲染道具文章在这里 -反之亦然。

01.什么是高阶组件？ (01. What is a Higher-Order Component?)

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that stems from React’s nature that privileges composition over inheritance.

高阶组件(HOC)是React中用于重用组件逻辑的高级技术。 HOC并非React API的一部分。 它们是一种模式，源于React的本质，即特权优先于继承。

JavaScript is a well-suited language for functional programming as it can accept higher-order functions. A higher-order function is a function that can take another function as an argument and/or that returns a function as a result.

JavaScript是一种适合函数式编程的语言，因为它可以接受高阶函数。 高阶函数是可以将另一个函数作为参数和/或返回结果的函数。

In the same way, a higher-order component is a function that takes (wraps) a component and returns a new component.

同样， 高阶组件是一个接受(包装)组件并返回新组件的函数。

Higher-order functions allow us to abstract over actions, not just values.

高阶函数使我们可以抽象动作，而不仅仅是值。

HOCs are common in third-party React libs, such as Redux or React Router. I bet you’ve used some of them, maybe without being aware of it.

HOC在第三方React库中很常见，例如Redux或React Router。 我敢打赌，您可能已经使用了其中一些，也许没有意识到。

T