2020/02/18 05-无状态组件和高阶组件_react 15 高阶组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42227818/article/details/104379250

本文深入探讨了React中的无状态组件（函数式组件）和高阶组件的概念及应用。无状态组件简化了组件定义，适用于无需状态管理和生命周期方法的场景。高阶组件则用于组件功能的增强，通过接受组件作为参数并返回新组件的方式实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从react15开始支持了一种无状态组件的东西

这是最开始讲的，最简单的定义，但是还是有点不好，啰嗦

这里应该有constructor来送个参数props
在这里插入图片描述
能不能修改，试试用function下定义，做一下function定义，这两个其实都可以用

这里props可以进来

这里调用sub

现在就拿到了

这个函数肯定调用了，不然无法看到

加个打印看的更加清楚一点
在这里插入图片描述
、用这样的方式即可

这个组件其实简化了，把最关心的render，简化成这样子

现在这么写，return去掉，大括号去掉
在这里插入图片描述

依然ok

可以简化一些很简单的组件的写法，当然不是最大的用处，这就是无状态组件
在这里插入图片描述

无状态写起来就像一个函数，只不过函数需要传一参，这个参数是props，剩下的用法和之前的一样，class打印出来也是function
这里习惯用大写，因为小写当html处理，必须是大写

无状态组件，也叫函数式组件。
开发中，很多情况下，组件其实很简单，不需要state状态，也不需要使用生命周期函数。无状态组件很好的满足了需要。
但是需要提供一个props参数，返回一个React元素。
无状态组件函数本身就是render函数
在这里插入图片描述
被改造就变成一行了，照用不误

高阶组件

在这里插入图片描述
这里就是刚才看到的组件，现在想要增强一下

自己定义函数，函数送两个参数进去，这个component参数本身是个组件，return一个还是还是组件，这就是高阶组件，高阶组件送两个参数，props该送什么是什么
在这里插入图片描述
构造一个函数，其实是一个包装，这个普通函数，其实可以弄一个component，因为后面需要使用，因为类似要放在Root位置，就必须要首字母大小，约定html小写

现在是写的中间态，Component实际上是个组件

在这里插入图片描述
进行改造，这是个匿名函数

下面能否柯里化一下，挪进去

props挪下来

柯里化就是整体往里面包

一条return语句就是一行，往里面扔，该有闭包有闭包

return函数了就不要名字了

写柯里化的第二层的内部函数要return一个函数扔出去
在这里插入图片描述
把function删除，改成箭头函数

这里把大括号删除
外面的大括号也可以删除，并把return删除

在这里插入图片描述
调整下格式

在这里插入图片描述
把括号再删除

假如现在是c组件，需要凑个root出来
送个参数进去，相当于return这些出来，这个函数特殊叫无状态组件，

返回值是组件下面就可以用，这个返回的整体就是组件

这样root就成了组件
在这里插入图片描述
加点波浪线看看是不是他

在这里插入图片描述
component传的是C，里面返回的组件时Root

传props就在name={}里传

就插进来了

这是root，root一包装就是这个部分，所以拿到了下面的name，没有props该怎么传

被包装的props没有送

root
在这里插入图片描述
root的组件从下面来

在这里插入图片描述
component的c用这种方式往外送

把props看做一个整体，就是现在用的组件

前面的叫函数传参

后面是整体返回组件

现在看起来有点丑

装饰器可以装饰类和function，但是不能装饰变量
在这里插入图片描述
原有的root就是这样的包装起来

现在写成类的机制，右边这部分会返回组件，这个组件替换原有root

在这里用的root其实是包装过的root

没有Bible根本跑不起来，装饰器语法太新了

这时候就需要用this
在这里插入图片描述
这样就可以

用以前装饰器的概念来理解

这个props是从下面传入的

想把所有灌注的属性关注到这里去，但是并不知道所有属性起什么名字吗

下面说就是把谁等于谁的形式解开了

**比如k1=v1，就是json，在python里就是当字典，把字典解开，成谁等于谁，相当于python kwargs，外面有几个这里有几个
在这里插入图片描述
这是原定义里的name

被包装到这个props，被解构

解构到了内部，内部就可以用这个name，外面有多少个往里面甩即可

看看内部到底能不能取到props

这里的装饰器跟python是一样的

前面加个属性，id是属性，后面的是变量{id}
在这里插入图片描述
带参装饰器如何一层层柯里化，把里面那层作为它return的东西

相等于后面这一层作为它这一层的返回值

在这里插入图片描述
这个元素就有了

首先不能分开，作为一个整体

作为一个整体

传一个参数，返回组件

这个组件就放到下面。，不是组件放不了

这一块返回是一个元素

在ES2016对装饰器进行支持，不借助bible根本跑不起来
在这里插入图片描述

装饰器只能修饰函数或者类，所以只能是无状态组件或者class定义的组件，这两种组件才能用装饰器

在这里插入图片描述

这里如果增加变量，就是两个参，这样在装饰器的时候就有问题，直接柯里化，变成带参装饰器

不管带参不带参，这里的返回值只能接受一参

跟这个参数在一起的，全部要柯里化

这样一简化就是带参装饰器函数定义
在这里插入图片描述
高阶组件是必须要熟悉的，主要是两个状态，state和props，谁是可变谁是不可变的，谁是外部谁是内部，变了以后会引起什么样操作。
在组件上会做某些事件关联，这些事件产生后，要触发函数回调达到目的。