摘要：高阶组件深入理解作用以及应用本文主要以通俗易懂的语言表达自己对高阶组件的一些见解，希望大家多多提问高阶组件深入理解高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。
react高阶组件深入理解、作用以及应用
本文主要以通俗易懂的语言表达自己对高阶组件的一些见解，希望大家多多提问
高阶组件深入理解高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。
首先根据定义我们明白它就是一个函数，而且它必须有返回值，返回值是一个组件，当然这里我们高阶组件可以嵌套（这里是一篇入门的文章，之后我会更新高阶组件多层嵌套）
高阶组件的作用一直以来我们都是看到新的知识都是一直学习，一直看官方文档，没有静下心来想一想到底为什么这个新知识能够在这个时候出现？为什么它刚出现就这么火？它到底在什么情况下用？它能解决什么问题……等等这一系列的问题
我第一次见到这个词是在redux中解读connect组件时，看到这个词，官方文档也有具体说明个人推荐到这里去看，比官方文档，解释的更好
其实高阶组件就是把公用的一些部分提出来，把修改的部分以参数的形势传进去，在这里可能有人会说这那需用什么高阶组件，我自己封装一个组件也可以达到同样的效果，简单的组件在这里你可能通过封装来实现，但是我举两个例子大家在想一下怎么通过组建封装来实现：1、antd组件的form组件，2、我们在redux中组件顶部写一行代码@connect之后就可以在组件中通过this.props访问store中的数据和一些修改数据的方法
这里也许也会有一些大牛说我可以实现，但是大牛毕竟比较少，可能许多程序员在心理都会觉得自己是大牛，在这里我可以告大家一个检测自己实力的方法：就是没事的时候把建立投一下阿里或者是京东，然后去面试一下，我敢保证许多人就会现行；
高阶组件的用处说了那么多废话，说点有用的吧，高阶组件一般用在那些地方呢
我们从一个实际问题来理解并学习高阶组件：有类似的几个组件但是组件内部只有少部分是不同的，它们身上都还有一些公用的方法，并且这些少部分组件组件都还要调用大组件的方法或者访问它的一些数据
我们来分一下：1，这几个组件的大部分样式和功能是相同的，我们可以可以思考能不能只写一次；2、它们不同的地方还会触发一些相同的方法；3、不同的地方只是内部的一小部分
如果我们按照组件封装的方法来实现的的话，我们封装一个大组件，然后把不同的小组件传进去，然后通过props把方法传到小组件，通过回调触发，但是这里有一个问题，我们写这几个组件的时候每次都要把大组件写一遍然后把子组件嵌入进去
加入这里我们采用高阶组件来实现的话，我们只需要把公用的方法和数据写到高阶函数返回的组件中，然后把组件传进去就可以了，最后在每个调用这个大组件的地方直接调用这个函数就可以了。
在上图中我们的代码可以这样来实现
//先写高阶组件
export default class HigherOrderComponent(InputComponent){
return class NewComponent extends Component{
constructor(){
super()
this.state={
initalState:123
}
}
commonFunc=()=>{
}
render(){
return(
)
}
}
}
//再来写outerComponent
import HigherOrderComponent from "HigherOrderComponent";
import MinComponent1 from "MinComponent1";
import MinComponent2 from "MinComponent2";
class OuterComponent extends Component{
render(){
return(
{HigherOrderComponent(minComponent1)}
{HigherOrderComponent(minComponent2)}
)
}
}
这样这个outerComponent就写完了,直接在这个编辑器里写的，代码可能会有以下小的错误，大家谅解
大家可以考虑一下这个组件加入要用我们组件封装嵌套的方式写的话能不能也写的简单点，欢迎大家在评论区写上自己的实现方式，方便大家一起讨论
高阶组件的应用上面一不小心连高阶组件的应用也写了，大概就是这么个过程，希望可以对大家有一些帮助
下班了，看明天有时间我把那两个小组件也更新一下，我们在小组件中可以通过this.props来访问高阶组件的方法和数据
谢谢……文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98736.html
摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念 高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...
01、介绍 React 高阶组件也叫做 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。 但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。 那么在学习高阶组件之前有一个概念我们必须清楚，就是高阶函数。 02、高阶函数 概念：高阶函数是一个函数，它接收函数作为参数或将函数作...
摘要：也就是说，如果能处理名为的这个高阶组件返回的组件则完全无视这个。先展示我是一个组件，我设置了两秒，之后展示倒计时完成 概况： 什么是高阶组件？ 高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。 具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！ 这是官方文档说的，我没有截全，因为后面的解释会造成误解...
摘要：高阶组件可以封装公共逻辑，给当前组件传递方法属性，添加生命周期钩子等。二是基础组件的静态方法也会因为高阶组件的包裹会丢失。如果在开发中确实遇到了必须使用它们，就一定要注意高阶组件的这个问题并认真解决。 高阶组件可以封装公共逻辑，给当前组件传递方法属性，添加生命周期钩子等。 案例： 一个项目中有的页面需要判断所处环境，如果在移动端则正常显示页面，并向用户提示当前页面所处的移动端环境，如果...
摘要：为了提高代码的复用性和可维护性，高阶函数应运而生。使用过的同学，不知道有没有使用过，高阶函数的作用和它是一样的。高阶函数在编程中扮演的角色就是火锅锅底的角色，它有公用的方法和属性，而各种组件就是肉和蔬菜。 为什么要使用高阶组件？ 想想以前用原生和jQuery的项目，上千行的code映入眼帘，瞬间有种昏死过去的冲动。代码难以维护，改一个bug可能出现N个bug，真的是很痛苦。于是乎组件化...
阅读 3053·2023-04-26 00:40
阅读 2390·2021-09-27 13:47
阅读 4196·2021-09-07 10:22
阅读 2965·2021-09-06 15:02
阅读 3306·2021-09-04 16:45
阅读 2483·2021-08-11 10:23
阅读 3598·2021-07-26 23:38
阅读 2899·2019-08-30 15:54
