您的位置: 首页  >  文章  >  2020/02/18 05-无状态组件和高阶组件

2020/02/18 05-无状态组件和高阶组件

分类: 文章 • 2023-11-19 13:34:04

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

这是最开始讲的，最简单的定义，但是还是有点
2020/02/18 05-无状态组件和高阶组件
这里应该有constructor来送个参数props
2020/02/18 05-无状态组件和高阶组件
能不能修改，做一下function定义，这两个其实都可以用
2020/02/18 05-无状态组件和高阶组件
这里props可以进来
2020/02/18 05-无状态组件和高阶组件
这里调用sub
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
现在就拿到了
2020/02/18 05-无状态组件和高阶组件
这个函数肯定调用了，不然无法看到
2020/02/18 05-无状态组件和高阶组件
加个打印看的更加清楚一点
2020/02/18 05-无状态组件和高阶组件
、用这样的方式即可
2020/02/18 05-无状态组件和高阶组件
这个组件其实简化了，把最关心的render，简化成这样子
2020/02/18 05-无状态组件和高阶组件

现在这么写，return去掉，大括号去掉
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
依然ok
2020/02/18 05-无状态组件和高阶组件

可以简化一些很简单的组件的写法，当然不是最大的用处，这就是无状态组件
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
无状态写起来就像一个函数，只不过函数需要传一参，这个参数是props，剩下的用法和之前的一样，class打印出来也是function
这里习惯用大写，因为小写当html处理，必须是大写
2020/02/18 05-无状态组件和高阶组件
无状态组件，也叫函数式组件。
开发中，很多情况下，组件其实很简单，不需要state状态，也不需要使用生命周期函数。无状态组件很好的满足了需要。
但是需要提供一个props参数，返回一个React元素。
无状态组件函数本身就是render函数
2020/02/18 05-无状态组件和高阶组件
被改造就变成一行了，照用不误
2020/02/18 05-无状态组件和高阶组件

高阶组件

2020/02/18 05-无状态组件和高阶组件
这里就是刚才看到的组件，现在想要增强一下
2020/02/18 05-无状态组件和高阶组件
自己定义函数，函数送两个参数进去，这个component参数本身是个组件，return一个还是还是组件，这就是高阶组件，高阶组件送两个参数，props该送什么是什么
2020/02/18 05-无状态组件和高阶组件
构造一个函数，其实是一个包装，这个普通函数，其实可以弄一个component，因为后面需要使用，因为类似要放在Root位置，就必须要首字母大小，约定html小写
2020/02/18 05-无状态组件和高阶组件
现在是写的中间态，Component实际上是个组件

2020/02/18 05-无状态组件和高阶组件
进行改造，这是个匿名函数
2020/02/18 05-无状态组件和高阶组件
下面能否柯里化一下，挪进去
2020/02/18 05-无状态组件和高阶组件
props挪下来
2020/02/18 05-无状态组件和高阶组件
柯里化就是整体往里面包
2020/02/18 05-无状态组件和高阶组件
一条return语句就是一行，往里面扔，该有闭包有闭包
2020/02/18 05-无状态组件和高阶组件
return函数了就不要名字了
2020/02/18 05-无状态组件和高阶组件
写柯里化的第二层的内部函数要return一个函数扔出去
2020/02/18 05-无状态组件和高阶组件
把function删除，改成箭头函数
2020/02/18 05-无状态组件和高阶组件
这里把大括号删除2020/02/18 05-无状态组件和高阶组件
外面的大括号也可以删除，并把return删除

2020/02/18 05-无状态组件和高阶组件
调整下格式

2020/02/18 05-无状态组件和高阶组件
把括号再删除
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
假如现在是c组件，需要凑个root出来2020/02/18 05-无状态组件和高阶组件
送个参数进去，相当于return这些出来，这个函数特殊叫无状态组件，
2020/02/18 05-无状态组件和高阶组件
返回值是组件下面就可以用，这个返回的整体就是组件
2020/02/18 05-无状态组件和高阶组件
这样root就成了组件
2020/02/18 05-无状态组件和高阶组件
加点波浪线看看是不是他
2020/02/18 05-无状态组件和高阶组件

2020/02/18 05-无状态组件和高阶组件
component传的是C，里面返回的组件时Root
2020/02/18 05-无状态组件和高阶组件
传props就在name={}里传
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
就插进来了
2020/02/18 05-无状态组件和高阶组件
这是root，root一包装就是这个部分，所以拿到了下面的name，没有props该怎么传
2020/02/18 05-无状态组件和高阶组件
被包装的props没有送
2020/02/18 05-无状态组件和高阶组件
root
2020/02/18 05-无状态组件和高阶组件
root的组件从下面来

2020/02/18 05-无状态组件和高阶组件
component的c用这种方式往外送
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
把props看做一个整体，就是现在用的组件
2020/02/18 05-无状态组件和高阶组件
前面的叫函数传参
2020/02/18 05-无状态组件和高阶组件
后面是整体返回组件
2020/02/18 05-无状态组件和高阶组件
现在看起来有点丑
2020/02/18 05-无状态组件和高阶组件
装饰器可以装饰类和function，但是不能装饰变量
2020/02/18 05-无状态组件和高阶组件
原有的root就是这样的包装起来
2020/02/18 05-无状态组件和高阶组件
现在写成类的机制，右边这部分会返回组件
2020/02/18 05-无状态组件和高阶组件
在这里用的root其实是包装过的root
2020/02/18 05-无状态组件和高阶组件
没有Bible根本跑不起来，装饰器语法太新了
2020/02/18 05-无状态组件和高阶组件
这时候就需要用this
2020/02/18 05-无状态组件和高阶组件
这样就可以
2020/02/18 05-无状态组件和高阶组件
用以前装饰器的概念来理解
2020/02/18 05-无状态组件和高阶组件
这个props是从下面 传入的
2020/02/18 05-无状态组件和高阶组件
想把所有灌注的属性关注到这里去，但是并不知道所有属性起什么名字吗
2020/02/18 05-无状态组件和高阶组件
下面说就是把谁等于谁的形式解开了
2020/02/18 05-无状态组件和高阶组件
**比如k1=v1，就是json，在python里就是当字典，把字典解开，成谁等于谁，相当于python kwargs，外面有几个这里有几个
2020/02/18 05-无状态组件和高阶组件
这是原定义里的name
2020/02/18 05-无状态组件和高阶组件
被包装到这个props，被解构
2020/02/18 05-无状态组件和高阶组件
解构到了内部，内部就可以用这个name，外面有多少个往里面甩即可
2020/02/18 05-无状态组件和高阶组件
看看内部到底能不能取到props
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
这里的装饰器跟python是一样的
2020/02/18 05-无状态组件和高阶组件
前面加个属性，id是属性，后面的是变量{id}
2020/02/18 05-无状态组件和高阶组件
带参装饰器如何一层层柯里化，把里面那层作为它return的东西
2020/02/18 05-无状态组件和高阶组件
相等于后面这一层作为它这一层的返回值
2020/02/18 05-无状态组件和高阶组件

2020/02/18 05-无状态组件和高阶组件
这个元素就有了
2020/02/18 05-无状态组件和高阶组件
首先不能分开，作为一个整体
2020/02/18 05-无状态组件和高阶组件
作为一个整体
2020/02/18 05-无状态组件和高阶组件
传一个参数，返回组件
2020/02/18 05-无状态组件和高阶组件
这个组件就放到下面。，不是组件放不了
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
这一块返回是一个元素
2020/02/18 05-无状态组件和高阶组件
在ES2016对装饰器进行支持，不借助bible根本跑不起来
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
装饰器只能修饰函数或者类，所以只能是无状态组件或者class定义的组件，这两种组件才能用装饰器
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件

2020/02/18 05-无状态组件和高阶组件2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件
这里如果增加变量，就是两个参，这样在装饰器的时候就有问题，直接柯里化，变成带参装饰器
2020/02/18 05-无状态组件和高阶组件
不管带参不带参，这里的返回值只能接受一参
2020/02/18 05-无状态组件和高阶组件
跟这个参数在一起的，全部要柯里化
2020/02/18 05-无状态组件和高阶组件
2020/02/18 05-无状态组件和高阶组件2020/02/18 05-无状态组件和高阶组件
这样一简化就是带参装饰器函数定义
2020/02/18 05-无状态组件和高阶组件
高阶组件是必须要熟悉的，主要是两个状态，state和props，谁是可变谁是不可变的，谁是外部谁是内部，变了以后会引起什么样操作。
在组件上会做某些事件关联，这些事件产生后，要触发函数回调达到目的。

2020/02/18 05-无状态组件和高阶组件
react目前还是作为前端框架首选，这些都是mvc框架
2020/02/18 05-无状态组件和高阶组件

相关推荐