谈一谈我对react中组件的理解

Posted 2023-04-20

参考技术A 1.什么是组件？
2.有状态和无状态组件
3.组件的封装和继承
4.高阶组件的使用
5.项目上如何合理的开发组件页面

组件就是页面上的一部分，可以是一个按钮，也可以是一张图片，可以是任意的一个 html 元素。

顾名思义，这种组件存在自己的 state ，可以控制内部状态变化，也会有 props ，个人一般用于处理业务型模块。

所有状态通过 props 来控制，只提供元素、结构，常用于公用的模块。

先说一下组件的封装，个人理解是独立一个组件出来，单独处理它的元素、结构、逻辑，通过 create 各种 props 去完善组件内部的状态变化，以达到通用的效果。
比如，创建一个输入框组件，有默认状态，支持自定义输入框外部样式、 placeholder 等

当遇到其他场景，比如需要在输入框前面添加修饰内容时，可以进行调整

再来说一下组件的类继承 extends ，创建一个类，该类是另一个类的子类，子类继承了父类所拥有的状态和函数。

继承的过程：
1.继承父类的原型，通过Object.create，第一个参数是创建一个对象的原型，定义原型上的属性constructor指向subclass；把父类的原型方法继承给子类原型

2.call继承，就是super()的处理过程，super()的实质就是call(this);把父类的对象方法继承给子类对象；这也是为什么在es6的继承时必须要加上super()，因为不加的话无法继承到父类的对象属性。

3.创建子类自己的方法（参考 es6 class 原理，这里不过多描述了）

高阶组件 HOC：Higher-Order Components 就是一个函数，能够接收一个组件并返回一个新的组件

使用

个人认为写页面其实就是在盖房子，你需要事先准备好：水泥、砖块、钢筋等，在 code page 时，你也需要准备好组件轮子，为了让每个组件复用性更大，需要将组件封装的更小，小到一个标题、一个表格、一个元素，这样在编写页面的时候你只需要注重布局，剩下的只管填充组件即可。

谈一谈我所了解的https

一、 http协议

首先我并不会很深入的去探讨这个东西，即使我曾经花了很长的时间去研究这个东西。主要是我考虑到
1、 自己没有系统的去学习这一块的知识，讲解的会比较的肤浅。
2、 就算是懂这个东西也不一定会为诸位看官讲清楚这个东西。
考虑到上面两条，我决定关于http这一块，我就重点来讲：
      1、http的基本概念
      2、http的三次握手
      3、http的四次挥手
      4、常用的http方法
      5、常用的http状态码

1、http的基本概念：

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。

http协议，即超文本传输协议。是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

http协议是用于从万维网服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。

http是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。

http协议永远都是客户端发起请求，服务器回送响应。这样就限制了使用http协议，无法实现在客户端没有发起请求的时候，服务器将消息推送给客户端。

http协议的主要特点可概括如下：
      1、支持客户/服务器模式。支持基本认证和安全认证。
      2、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有get、head、post。每种方法规定了客户与服务器联系的类型不同。由于http协议简单，使得http服务器的程序规模小，因而通信速度很快。
      3、灵活：http允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
      4、http 0.9和1.0使用非持续连接：限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。http 1.1使用持续连接：不必为每个web对象创建一个新的连接，一个连接可以传送多个对象，采用这种方式可以节省传输时间。
      5、无状态：http协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。

2、tcp的三次握手

谈到http必定就会谈到的一个问题--http的三次握手，三次握手其实你真正明白这个问题了之后，这个东西会被你想的很简单。首先你要明白三次挥手是用来干嘛的？
在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。如下图所示

首先明白上面的含义的时候，你必须要了解几个状态的含义：SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)。
结合上图我们将连接过程分为三个过程：
（1）：首先是客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；
（2）：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
（3）：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。 完成三次握手，客户端与服务器开始传送数据。

3、tcp的四次挥手

由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。如下图所示

结合上图可知，我们将关闭连接的过程划分为四个过程：
（1）客户端发送一个FIN，用来关闭客户到服务器的数据传送。
（2）服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。
（3）服务器关闭与客户端的连接，发送一个FIN给客户端。
（4）客户端发回ACK报文确认，并将确认序号设置为收到序号加1。

4、常用的http方法与使用场景

http的方法有很多，大概有：
1、 GET：用于请求访问已经被URL（统一资源标识符）识别的资源，可以通过URL传参给服务器。
2、 POST：用于传输信息给服务器，主要功能与Get方法类似，但一般推荐POST方式。
3、 PUT：传输文件，报文主体包含文件内容，保存到对应URL位置。
4、 HEAD：获取报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URL是否有效。
5、 DELET：删除文件，与PUT方法相反，删除对应URL位置的文件。
6、 OPTIONS：查询相应URL支持的HTTP方法。
但是我经常使用的还是get加post，我在这里就简单的介绍一下get/post的区别吧：
（1） get请求一般用来获得数据，而post请求一般用来发送数据。人们期望，get请求不会对服务器造成任何影响，而post请求则可能会影响服务器端的数据。get请求消耗的资源较post请求而言，会少一些，但相对安全性较差。发送同样大小的数据，get请求的效率最高可以达到post请求的2倍。

（2）一般按照约定，使用get请求时，将数据通过url进行传递，而是用post请求时，将数据放在body里。但这并非硬性规定，因为method和data本身是正交的。post请求亦可将数据放在url中。

（3）就协议底层实现而言，在get请求中，只产生一个TCP数据包，浏览器会将header和data一并发送出去，等待服务器的回应；而在post请求中，会产生2个TCP数据包。，浏览器先发送header，服务器响应100 continue，浏览器再发送data。

5、常用的http状态码

状态码	响应类别	原因短语
1XX	信息性状态码（Informational）	服务器正在处理请求
2XX	成功状态码（Success）	请求已正常处理完毕
3XX	重定向状态码（Redirection）	需要进行额外操作以完成请求
4XX	客户端错误状态码（Client Error）	客户端原因导致服务器无法处理请求
5XX	服务器错误状态码（Server Error）	服务器原因导致处理请求出错

总的来说，我现在项目有用到的：
200 OK 请求正常处理完毕
204 No Content 请求成功处理，没有实体的主体返回
304 Not Modified 发送的附带条件请求未满足
400 Bad Request 请求报文语法错误或参数错误
401 Unauthorized 需要通过HTTP认证，或认证失败
403 Forbidden 请求资源被拒绝
404 Not Found 无法找到请求资源（服务器无理由拒绝）
500 Internal Server Error 服务器故障或Web应用故障
503 Service Unavailable 服务器超负载或停机维护

二、 https概述

https呢？可以理解为HTTP+SSL/TLS， 即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL，用于安全的 HTTP 数据传输。众所周知，我们在使用http协议的时候，数据的交换都是明文，这样就会带来很大的信息安全于是引入了https。
我在这里呢？主要是讲述https的对称加密和非对称加密。后面我在真正开始写算法章节的时候，会重点来讲一讲我研究的几个加密算法。

1、对称加密

    对称加密呢？打个不切当的比方，小明和小红在上学的时候互生情愫，但是又害怕被父母发现。于是他们想到了一个办法，就是他们在一个大树下面放了一个箱子，并且用锁锁起来。如果小红给小明写了信，就通知小明拿着钥匙去去放在箱子里面的信。小明取信也是如此。
    小明和小红的钥匙就好比对称加密中数据传输双方的公钥，数据可以通过公钥加密后，通过他们仅有他们知道的公钥去解密。这种加密方法一定程度上面做到加密的效果。这样做的好处主要有：对称加密算法的优点是算法公开、计算量小、加密速度快、加密效率高。但是如果小明和小红的钥匙遗失也就是保密双方的公钥丢失，或者小明、小红的钥匙被泄漏也就是公钥解密方式被泄漏 这样也就达不到加密的效果了。
    我这里有一个不恰当的动画

背景：小明和小红买了一个箱子，一把锁。两个人揣着两把锁的钥匙，想通过这个来传递书信。
一回目 小明：小红，我给你写了一封信。（对称加密）
二回目 小红拿出箱子的钥匙，打开箱子读取小明寄来的书信。（对称解密）
三回目 小红：小明，我给你回信了，（对称加密）
四回目 小明拿出箱子的钥匙，打开箱子读取小红回寄的书信。（对称解密）

2、非对称加密

    既然对称加密方式存在很大程度上的缺陷。于是聪明的计算机先辈们就发明了非对称加密。关于非对称加密呢？其运行的方式：
    首先乙方生成一对密钥（公钥和私钥）并将公钥向其它方公开。然后得到该公钥的甲方使用该密钥对机密信息进行加密后再发送给乙方。最后乙方再用自己保存的另一把专用密钥（私钥）对加密后的信息进行解密。乙方只能用其专用密钥（私钥）解密由对应的公钥加密后的信息。反之也一样。
    这样做的话，即使在传输过程中攻击者截获了传输的密文，并得到了乙的公钥，也无法破解密文，因为只有乙的私钥才能解密密文。这种方式在一定程度加强了数据的安全性。但是同样非对称加密的缺点是加密和解密花费时间长、速度慢，只适合对少量数据进行加密。
同样我在这里也画了一个动画。

背景：被双方妈妈掌握钥匙的小男女，于是双方都买了一个未上锁的箱子
一回目 小红拿着未上锁的箱子跟小明说：小明，如果你想跟我写信，就放在这个箱子里面。
二回目 小明将写好的书信，放在箱子里面，并且锁好，并跟小红说：小红，我给你写信了。
三回目 小红拿出箱子的钥匙，将箱子里面的书信取出来，开心的读了起来并感慨：小明真有趣。

四、 最后说点https和http

1、 基本概念：

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从万维网服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

2、 http与https有什么区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。