黑马React18: 基础Part II

黑马React: 基础2

Date: November 16, 2023
Sum: 受控表单绑定、获取DOM、组件通信、useEffect、Hook、优化B站评论




受控表单绑定

受控表单绑定

概念:使用React组件的状态(useState)控制表单的状态

Untitled

  1. 准备一个React状态值
const [value, setValue] = useState('')
  1. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
<inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}
/>

Case:

Code:

// 受控绑定表单import { useState } from "react"// 1. 声明一个react状态 - useState// 2. 核心绑定流程// 1. 通过value属性绑定 react 状态// 2. 绑定 onChange 事件 通过事件参数e拿到输入框最新的值 反向修改到react状态function App() {const [value, setValue] = useState('')return (<div className="App"><input type="text" value={value}onChange={(e) => setValue(e.target.value)}/></div>)
}export default App

Res:

Untitled




React中获取DOM

在 React 组件中获取/操作 DOM,需要使用 useRef React Hook钩子函数,分为两步:

  1. 使用useRef创建 ref 对象,并与 JSX 绑定
const inputRef = useRef(null)
<input type="text" ref={inputRef} />
  1. 在DOM可用时,通过 inputRef.current 拿到 DOM 对象
console.log(inputRef.current)

Case:

Code:

import React, { useRef } from "react"
// React中获取DOM// 1. useRef生成ref对象, 绑定到dom标签身上
// 2. dom可用时, ref.current获取dom对象// 渲染完毕之后dom生成之后可用function App() {const inputRef = useRef(null)const showDom = () => {console.log(inputRef.current)}return (<div className="App"><input type="text" ref={inputRef}/><button onClick={ () => showDom() }>获取DOM</button></div>)
}export default App

Res:

Untitled




案例:B站评论—发表评论

B站评论案例 —— 核心功能实现

Untitled

  1. 获取评论内容
  2. 点击发布按钮发布评论

Code:

  1. 获取评论内容
const [content, setContent] = useState('')...{/* 评论框 */}
<textareaclassName="reply-box-textarea"placeholder="发一条友善的评论"ref={inputRef}value={content}onChange={(e) => setContent(e.target.value)}
/>
  1. 点击发布按钮发布评论
const handlPublish = () => {setCommentList([...commentList,{rpid: uuidV4(), // 随机iduser: {uid: '30009257',avatar,uname: '黑马前端',},content: content,ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分like: 66,}])// 1. 清空输入框的内容setContent('')// 2. 重新聚焦  dom(useRef) - focusinputRef.current.focus()
}...<div className="reply-box-send"><div className="send-text" onClick={handlPublish}>发布</div>
</div>


B站评论案例 — id处理和时间处理

Untitled

  1. rpid要求一个唯一的随机数id - uuid
  2. ctime要求以当前时间为标准,生成固定格式 - dayjs

Code:

import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs'...{rpid: uuidV4(), // 随机iduser: {uid: '30009257',avatar,uname: '黑马前端',},content: content,ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分like: 66,
}

理解:

1-uuid会生成一个随机数

在component中查看:

Untitled

2-日期格式化

dayjs.format() // 具体参考以下文档

Ref:

随机数uuid: https://github.com/uuidjs/uuid

日期dayjs: https://dayjs.gitee.io/zh-CN/



B站评论案例 — 清空内容并重新聚焦

Untitled

  1. 清空内容 - 把控制input框的value状态设置为空串
  2. 重新聚焦 - 拿到input的dom元素,调用focus方法

Code:

const handlPublish = () => {setCommentList([...commentList,{rpid: uuidV4(), // 随机iduser: {uid: '30009257',avatar,uname: '黑马前端',},content: content,ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分like: 66,}])// 1. 清空输入框的内容setContent('')// 2. 重新聚焦  dom(useRef) - focusinputRef.current.focus()
}...{/* 评论框 */}
<textareaclassName="reply-box-textarea"placeholder="发一条友善的评论"ref={inputRef} // 给评论框绑定个ref标签, 方便获取value={content}onChange={(e) => setContent(e.target.value)}
/>



组件通信

理解组件通信

概念:组件通信就是组件之间的数据传递,根据组件嵌套关系的不同,有不同的通信方法

Untitled



父传子-基础实现

Untitled

实现步骤:

  1. 父组件传递数据 - 在子组件标签上绑定属性
  2. 子组件接收数据 - 子组件通过props参数接收数据

Case:

Code:

// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数function Son(props) {console.log(props);return <div>this is Son, {props.name}</div>
}function App() {const name = 'this is app name'return (<div className="App"><Son name={name} /></div>)
}export default App

Res:

Untitled



父传子-props说明

  1. props可传递任意的数据

数字、字符串、布尔值、数组、对象、函数、JSX

Untitled

  1. props是只读对象

子组件只能读取props中的数据,不能直接进行修改, 父组件的数据只能由父组件修改



父传子 - 特殊的prop children

场景:当我们把内容嵌套在子组件标签中时,父组件会自动在名为children的prop属性中接收该内容

Case:

Code:

// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数function Son(props) {console.log(props);return <div>this is Son, {props.children}</div>
}function App() {return (<div><Son><span>this is span</span></Son></div>)
}export default App

Res:

Untitled



父子组件通信-子传父

Untitled

核心思路:在子组件中调用父组件中的函数并传递参数

Untitled

Case:

Code:

// 子传父
// 核心: 在子组件中调用父组件中的函数并传递实参import { useState } from "react";function Son({onGetMsg}) {// Son组件中的数据const sonMsg = 'this is son msg'return (<div><button onClick={() => onGetMsg(sonMsg)}>sendMsg</button></div>)
}function App() {const [msg, setMsg] = useState('')const getMsg = (msg) => {console.log(msg);setMsg(msg)}return (<div>Father: { msg }<Son onGetMsg={getMsg}/></div>)
}export default App

Res:

Untitled



使用状态提升实现兄弟组件通信

实现流程:

Untitled

实现思路:借助“状态提升”机制,通过父组件进行兄弟组件之间的数据传递

  1. A组件先通过子传父的方式把数据传给父组件App
  2. App拿到数据后通过父传子的方式再传递给B组件

Case:

// 兄弟组件传递// 1. 通过子传父 A => App ✅
// 2. 通过父传子 App => B import { useState } from "react";function A({ onGetAName }) {const name = 'this is A name'return (<div>this is A component: <button onClick={() => onGetAName(name)}>send</button></div>)  
}function B(props) {return (<div>this is B component: {props.name}</div>)
}function App() {const [name, setName] = useState('')const getAName = (name) => {setName(name)}return (<div><h1>Father: </h1><A onGetAName={getAName} /><B name={name} /></div>)
}export default App

Res:

Untitled



使用Context机制跨层级组件通信

图示:

Untitled

实现步骤

  1. 使用createContext方法创建一个上下文对象Ctx
  2. 在顶层组件(App)中通过 Ctx.Provider 组件提供数据
  3. 在底层组件(B)中通过 useContext 钩子函数获取消费数据

Untitled

Case:
Code:

// Context跨层通信
// App => A => B// 1. createContext方法创建一个上下文对象// 2. 在顶层组件 通过Provider组件提供数据
// 3. 在底层组件 通过useContext钩子函数使用数据import { createContext, useContext } from "react";const MsgContext = createContext()function A() {return (<div>this is A component< B /></div>)
}function B() {const msg = useContext(MsgContext)return (<div>this is B component - { msg }</div>)
}function App() {const msg = 'this is app msg'return (<div><MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}export default App

Res:

Untitled




useEffect 的使用

useEffect 的概念理解

useEffect是一个React Hook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作(副作用),比如发送AJAX请求,更改DOM等等

Untitled

说明:上面的组件中没有发生任何的用户事件,组件渲染完毕之后就需要和服务器要数据,整个过程属于 “只由渲染引起的操作”



useEffect 的基础使用

需求:在组件渲染完毕之后,立刻从服务端获取频道列表数据并显示到页面中

语法

useEffect(() => {}, [])

参数1是一个函数,可以把它叫做副作用函数,在函数内部可以放置要执行的操作

参数2是一个数组(可选参),在数组里放置依赖项,不同依赖项会影响第一个参数函数的执行,当是一个空数组的时候,副作用函数只会在组件渲染完毕之后执行一次

接口地址:http://geek.itheima.net/v1_0/channels

Case:
Code:

import { useEffect, useState } from "react"const URL = 'http://geek.itheima.net/v1_0/channels'function App() {// 创建一个状态数据const [list, setList] = useState([])useEffect(() => {// 额外的操作 获取频道列表async function getList() {const res = await fetch(URL)const jsonRes = await res.json()// console.log(list);setList(jsonRes.data.channels)}getList()}, [])return (<div className="App">{/* this is app - { list[0].name } */}<ul>{ list.map(item => {return <li key={ item.id }>{ item.name }</li>})}</ul></div>)
}export default App

Res:

Untitled



useEffect 依赖项参数说明

useEffect副作用函数的执行时机存在多种情况,根据传入依赖项的不同,会有不同的执行表现

依赖项副作用函数执行时机
没有依赖项目数组初始渲染+组件更新时执行
空数组依赖只在初始渲染时执行一次
添加特定依赖项组件初始渲染 + 特性依赖项变化时执行

Case: 1. 没有依赖项

func: 点击按钮, 数字会逐渐加1

Code:

import { useEffect, useState } from "react"function App() {// 1. 没有依赖项 初始 + 组件 更新const [count, setCount] = useState(0)useEffect(() => {console.log('副作用函数执行了');})const handleAdd = () => {setCount(count + 1)}return (<div className="App">this is app<button onClick={ () => handleAdd() }> {count} </button></div>)
}export default App

Res:

Untitled

Case2: 空数组依赖

Code:

import { useEffect, useState } from "react"function App() {// 1. 没有依赖项 初始 + 组件 更新const [count, setCount] = useState(0)useEffect(() => {console.log('副作用函数执行了');})const handleAdd = () => {setCount(count + 1)}return (<div className="App">this is app<button onClick={ () => handleAdd() }> {count} </button></div>)
}export default App

Res:

Untitled

Case3: 添加特定依赖项

Code:

import { useEffect, useState } from "react"function App() {// 3. 添加特定依赖项// 依赖于 count , 只要count变化, 就执行副作用函数const [count, setCount] = useState(0)useEffect(() => {console.log('副作用函数执行了');}, [count])const handleAdd = () => {setCount(count + 1)}return (<div className="App">this is app<button onClick={ () => handleAdd() }> {count} </button></div>)
}export default App

Res:

Untitled



useEffect — 清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作,社区也经常把它叫做副作用操作,比如在useEffect中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用

useEffect(() => {// 实现副作用操作逻辑return () => {// 清除副作用逻辑...}
}, [])

说明:清除副作用的函数最常见的执行时机是在组件卸载时自动执行

需求:在Son组件渲染时开启一个定制器,卸载时清除这个定时器

Case:

func: 点击卸载, 定时器会停止

Code:

import { useEffect, useState } from "react";function Son() {useEffect(() => {const timer = setInterval(() => {console.log('定时器执行中...pilipala');}, 1000)return () => {clearInterval(timer)}}, [])return <div>this is son</div>
}function App() {// 通过条件渲染模拟组件卸载const [show, setShow] = useState(true)return (<div>{ show && <Son />}<button onClick={() => setShow(false)}>卸载Son组件</button></div>)
}export default App

Res:

Untitled




自定义Hook实现

自定义Hook函数

概念:自定义Hook是以 use 打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用

Untitled

Case:

func: 切换 显示/隐藏 组件

Code:

// 封装自定义 Hook// 问题: 布尔切换的逻辑 当前组件耦合在一块时, 不方便复用
// 解决思路: 自定义Hookimport { useState } from "react"function useToggle() {// 可复用逻辑代码const [value, setValue] = useState(true)const handleToggle = () => {setValue(false)}// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value, handleToggle}
}// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑 (只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调returan出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑, 就调用这个自定义hook, 结构出来状态和回调进行使用function App() {const { value, handleToggle } = useToggle()return (<div className="App">{ value && <div>this is div</div>}<button onClick={() => handleToggle()}>toggle</button></div>)
}export default App

Res:

Untitled




React Hooks使用规则

使用规则:

  1. 只能在组件中或者其他自定义Hook函数中调用

  2. 只能在组件的顶层调用,不能嵌套在 if、for、其他函数中

    理解: 就是Hooks不能有条件地执行, 只能直接在顶部采用const { value, handleToggle } = useToggle() 这种方式, 直接调用

Untitled




案例:优化B站评论案例

优化需求

Untitled

  1. 使用请求接口的方式获取评论列表并渲染
  2. 使用自定义Hook函数封装数据请求的逻辑
  3. 把评论中的每一项抽象成一个独立的组件实现渲染


优化需求-通过接口获取评论列表

  1. 使用 json-server 工具模拟接口服务, 通过 axios 发送接口请求

    json-server是一个快速以.json文件作为数据源模拟接口服务的工具
    axios是一个广泛使用的前端请求库

# -D 指安装到开发时依赖
npm i json-server -D
  1. 使用 useEffect 调用接口获取数据
useEffect(() => {// 发送网络请求...
}, [])

拓展:

json-server

使用步骤:

1-安装(参考视频)

2-配置 package.json

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","serve": "json-server db.json --port 3004" // 添加 json-server 的端口
},

参考:

json-server: https://github.com/typicode/json-server



优化需求-自定义Hook函数封装数据请求

一般思路:

  1. 编写一个 use 打头的函数
  2. 函数内部编写封装的逻辑
  3. return出去组件中用到的状态和方法
  4. 组件中调用函数解构赋值使用
function useGetList () {// 获取接口数据渲染const [commentList, setCommentList] = useState([])useEffect(() => {// 请求数据async function getList () {// axios请求数据const res = await axios.get(' http://localhost:3004/list')setCommentList(res.data)}getList()}, [])return {commentList,setCommentList}
}...const [commetList, setCommetList] = useGetList()


优化需求-封装评论项Item组件

Untitled

抽象原则:App作为“智能组件”负责数据的获取,Item作为“UI组件”负责数据的渲染

// 封装Item组件
function Item ({ item, onDel }) {return (<div className="reply-item">{/* 头像 */}<div className="root-reply-avatar"><div className="bili-avatar"><imgclassName="bili-avatar-img"alt=""src={item.user.avatar}/></div></div><div className="content-wrap">{/* 用户名 */}<div className="user-info"><div className="user-name">{item.user.uname}</div></div>{/* 评论内容 */}<div className="root-reply"><span className="reply-content">{item.content}</span><div className="reply-info">{/* 评论时间 */}<span className="reply-time">{item.ctime}</span>{/* 评论数量 */}<span className="reply-time">点赞数:{item.like}</span>{/* 条件:user.id === item.user.id */}{user.uid === item.user.uid &&<span className="delete-btn" onClick={() => onDel(item.rpid)}>删除</span>}</div></div></div></div>)
}{/* 评论列表 */}
<div className="reply-list">{/* 评论项 */}{commetList.map(item => <Item key={item.rpid} item={item} onDel={() => handleDel(item.rpid)}/>)}
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/154908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于C#实现协同推荐 SlopeOne 算法

一、概念 相信大家对如下的 Category 都很熟悉&#xff0c;很多网站都有类似如下的功能&#xff0c;“商品推荐”,"猜你喜欢“&#xff0c;在实体店中我们有导购来为我们服务&#xff0c;在网络上我们需要同样的一种替代物&#xff0c;如果简简单单的在数据库里面去捞&am…

小迪笔记(1)——操作系统文件下载反弹SHELL防火墙绕过

名词解释 POC&#xff1a;验证漏洞存在的代码&#xff1b; EXP&#xff1a;利用漏洞的代码&#xff1b; payload&#xff1a;漏洞利用载荷&#xff0c; shellcode&#xff1a;漏洞代码&#xff0c; webshell&#xff1a;特指网站后门&#xff1b; 木马&#xff1a;强调控制…

rotation matrix reflection matrix

文章目录 1. rotation matrix1.1 结论 2. reflection matrix2.1 结论 1. rotation matrix 图像逆时针旋转 θ \theta θ的矩阵 Q r o t a t e [ cos ⁡ θ − sin ⁡ θ sin ⁡ θ cos ⁡ θ ] (1) Q_{rotate}\begin{bmatrix}\cos\theta&-\sin\theta\\\sin\theta&\c…

数据湖的概念、发展背景和价值

数据湖是一个集中化的存储系统&#xff0c;旨在以低成本、大容量的方式&#xff0c;无需预先对数据进行结构化处理&#xff0c;存储各种结构化和非结构化数据。以下是数据湖概念、发展背景和价值的详细介绍。 数据湖概念 数据湖的概念源自于对传统数据仓库的补充。传统数据仓…

Java修仙记之记录一次与前端女修士论道的经历

文章开始之前&#xff0c;想跟我念一句&#xff1a;福生无量天尊&#xff0c;无量寿佛&#xff0c;阿弥陀佛 第一场论道&#xff1a;id更新之争 一个天气明朗的下午&#xff0c;前端的小美女长发姐告诉我&#xff1a;嘿&#xff0c;小后端&#xff0c;你的代码报错了 我答道&am…

iptables的一次修复日志

iptables的一次修复日志 搭建配置wireguard后&#xff0c;使用内网连接设备十分方便&#xff0c;我采用的是星型连接&#xff0c;即每个节点都连接到中心节点&#xff0c;但是突然发生了重启wg后中心节点不转发流量的问题&#xff0c;即每个接入的节点只能与中心节点连接&…

M2 Mac Xcode编译报错 ‘***.framework/‘ for architecture arm64

In /Users/fly/Project/Pods/YYKit/Vendor/WebP.framework/WebP(anim_decode.o), building for iOS Simulator, but linking in object file built for iOS, file /Users/fly/Project/Pods/YYKit/Vendor/WebP.framework/WebP for architecture arm64 这是我当时编译模拟器时报…

Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板

备注说明&#xff1a; 1.小白可看步骤一二&#xff0c;进阶小白可直接看步骤三 步骤一&#xff1a;新建文件夹<uitest>&#xff0c;在mars3d仓库拉一份最简项目模板&#xff1a; git clone mars3d-vue-template: Vue3.x 技术栈下的Mars3D项目模板 步骤二&#xff1a;运…

本地部署 EmotiVoice易魔声 多音色提示控制TTS

本地部署 EmotiVoice易魔声 多音色提示控制TTS EmotiVoice易魔声 介绍ChatGLM3 Github 地址部署 EmotiVoice准备模型文件准备预训练模型推理 EmotiVoice易魔声 介绍 EmotiVoice是一个强大的开源TTS引擎&#xff0c;支持中英文双语&#xff0c;包含2000多种不同的音色&#xff…

网站为什么一定要安装SSL证书

随着互联网的普及和发展&#xff0c;网络安全问题日益凸显。在这个信息爆炸的时代&#xff0c;保护用户隐私和数据安全已经成为各大网站和企业的首要任务。而SSL证书作为一种网络安全技术&#xff0c;已经成为网站必备的安全工具。那么&#xff0c;为什么网站一定要安装SSL证书…

electron项目开机自启动

一、效果展示&#xff1a;界面控制是否需要开机自启动 二、代码实现&#xff1a; 1、在渲染进程login.html中&#xff0c;画好界面&#xff0c;默认勾选&#xff1b; <div class"intro">开机自启动 <input type"checkbox" id"checkbox&quo…

C++纯虚函数和抽象类 制作饮品案例(涉及知识点:继承,多态,实例化继承抽象类的子类,多文件实现项目)

一.纯虚函数的由来 在多态中&#xff0c;通常父类中虚函数的实现是毫无意义的&#xff0c;主要都是调用子类重写的内容。例如&#xff1a; #include<iostream>using namespace std;class AbstractCalculator { public:int m_Num1;int m_Num2;virtual int getResult(){r…

PHP手动为第三方类添加composer自动加载

有时候我们要使用的第三方的类库&#xff08;SDK&#xff09;没用用composer封装好&#xff0c;无法用composer进行安装&#xff0c;怎么办呢&#xff1f;&#xff1f;&#xff1f; 步骤如下&#xff1a; 第一步、下载需要的SDK文件包&#xff0c;把它放在vendor目录下 第二步…

SSM高考志愿辅助推荐系统-计算机毕业设计附源码21279

目 录 摘要 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 高考志愿辅助推荐系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2…

竞赛选题 身份证识别系统 - 图像识别 深度学习

文章目录 0 前言1 实现方法1.1 原理1.1.1 字符定位1.1.2 字符识别1.1.3 深度学习算法介绍1.1.4 模型选择 2 算法流程3 部分关键代码 4 效果展示5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计 图像识别 深度学习 身份证识别…

K8S精进之路-控制器Deployment-(1)

在K8S中&#xff0c;最小运行单位为POD,它是一个逻辑概念&#xff0c;其实是一组共享了某些资源的容器组。POD是能运行多个容器的&#xff0c;Pod 里的所有容器&#xff0c;共享的是同一个 Network Namespace&#xff0c;并且可以声明共享同一个 Volume。在POD中能够hold住网络…

Python数据分析实战-爬取以某个关键词搜索的最新的500条新闻的标题和链接(附源码和实现效果)

实现功能 通过百度引擎&#xff0c;爬取以“开源之夏”为搜索关键词最新的500条新闻的标题和链接 实现代码 1.安装所需的库&#xff1a;你需要安装requests和beautifulsoup4库。可以使用以下命令通过pip安装&#xff1a; pip install requests beautifulsoup42.发起搜索请求…

【AT模式连接ONENET】ONENET可视化平台的使用

02 ONENET可视化平台的使用 ATCWMODE1 设置模式 ATCWDHCP1,1 启动DHCP功能 ①ATCWJAP"ssid","password" ATCWJAP“123456789”&#xff0c;“wang020118” ②ATMQTTUSERCFG0,1,"设备名字","设备ID","你的鉴权信息""…

每日一题(LeetCode)----数组--螺旋矩阵(一)

每日一题(LeetCode)----数组–螺旋矩阵&#xff08;一&#xff09; 1.题目&#xff08;54. 螺旋矩阵&#xff09; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1…

No appropriate protocol -- Mysql

DataGrip连接mysql报以下异常信息&#xff1a; javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate) The following required algorithms might be disabled: SSLv3, TLSv1, TLSv1.1, RC4, DES, MD5wi…