React 全栈体系(四)

第二章 React面向组件编程

六、组件的生命周期

1. 效果

  • 需求:定义组件实现以下功能:
    • 让指定的文本做显示 / 隐藏的渐变动画
    • 从完全可见,到彻底消失,耗时2S
    • 点击“不活了”按钮从界面中卸载组件

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_引出生命周期</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子class Life extends React.Component{state = {opacity:1}death = ()=>{//卸载组件ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//组件挂载完毕componentDidMount(){console.log('componentDidMount');this.timer = setInterval(() => {//获取原状态let {opacity} = this.state//减小0.1opacity -= 0.1if(opacity <= 0) opacity = 1//设置新的透明度this.setState({opacity})}, 200);}//组件将要卸载componentWillUnmount(){//清除定时器clearInterval(this.timer)}//初始化渲染、状态更新之后render(){console.log('render');return(<div><h2 style={{opacity:this.state.opacity}}>React学不会怎么办?</h2><button onClick={this.death}>不活了</button></div>)}}//渲染组件ReactDOM.render(<Life/>,document.getElementById('test'))</script>
</body>
</html>

2. 理解

  • 组件从创建到死亡它会经历一些特定的阶段。
  • React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  • 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。

3. 生命周期流程图(旧)

请添加图片描述

  • 生命周期的三个阶段(旧)

3.1 初始化阶段: 由ReactDOM.render()触发—初次渲染

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

3.2 更新阶段: 由组件内部this.setSate()或父组件重新render触发

  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

3.3 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

  • componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_react生命周期(旧)</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1.	constructor()2.	componentWillMount()3.	render()4.	componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件render触发1.	shouldComponentUpdate()2.	componentWillUpdate()3.	render() =====> 必须使用的一个4.	componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1.	componentWillUnmount()  =====> 常用一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息*///创建组件class Count extends React.Component{//构造器constructor(props){console.log('Count---constructor');super(props)//初始化状态this.state = {count:0}}//加1按钮的回调add = ()=>{//获取原状态const {count} = this.state//更新状态this.setState({count:count+1})}//卸载组件按钮的回调death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//强制更新按钮的回调force = ()=>{this.forceUpdate()}//组件将要挂载的钩子componentWillMount(){console.log('Count---componentWillMount');}//组件挂载完毕的钩子componentDidMount(){console.log('Count---componentDidMount');}//组件将要卸载的钩子componentWillUnmount(){console.log('Count---componentWillUnmount');}//控制组件更新的“阀门”shouldComponentUpdate(){console.log('Count---shouldComponentUpdate');return true}//组件将要更新的钩子componentWillUpdate(){console.log('Count---componentWillUpdate');}//组件更新完毕的钩子componentDidUpdate(){console.log('Count---componentDidUpdate');}render(){console.log('Count---render');const {count} = this.statereturn(<div><h2>当前求和为:{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载组件</button><button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button></div>)}}//父组件Aclass A extends React.Component{//初始化状态state = {carName:'奔驰'}changeCar = ()=>{this.setState({carName:'奥拓'})}render(){return(<div><div>我是A组件</div><button onClick={this.changeCar}>换车</button><B carName={this.state.carName}/></div>)}}//子组件Bclass B extends React.Component{//组件将要接收新的props的钩子componentWillReceiveProps(props){console.log('B---componentWillReceiveProps',props);}//控制组件更新的“阀门”shouldComponentUpdate(){console.log('B---shouldComponentUpdate');return true}//组件将要更新的钩子componentWillUpdate(){console.log('B---componentWillUpdate');}//组件更新完毕的钩子componentDidUpdate(){console.log('B---componentDidUpdate');}render(){console.log('B---render');return(<div>我是B组件,接收到的车是:{this.props.carName}</div>)}}//渲染组件ReactDOM.render(<Count/>,document.getElementById('test'))</script>
</body>
</html>

4. 生命周期流程图(新)

在这里插入图片描述

  • 生命周期的三个阶段(新)

4.1 初始化阶段: 由ReactDOM.render()触发—初次渲染

  • constructor()
  • getDerivedStateFromProps
  • render()
  • componentDidMount()

4.2 更新阶段: 由组件内部this.setSate()或父组件重新render触发

  • getDerivedStateFromProps
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate
  • componentDidUpdate()

4.3 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

  • componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_react生命周期(新)</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script><script type="text/babel">//创建组件class Count extends React.Component{/* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1.	constructor()2.	getDerivedStateFromProps 3.	render()4.	componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发1.	getDerivedStateFromProps2.	shouldComponentUpdate()3.	render()4.	getSnapshotBeforeUpdate5.	componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1.	componentWillUnmount()  =====> 常用一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息*///构造器constructor(props){console.log('Count---constructor');super(props)//初始化状态this.state = {count:0}}//加1按钮的回调add = ()=>{//获取原状态const {count} = this.state//更新状态this.setState({count:count+1})}//卸载组件按钮的回调death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//强制更新按钮的回调force = ()=>{this.forceUpdate()}//若state的值在任何时候都取决于props,那么可以使用getDerivedStateFromPropsstatic getDerivedStateFromProps(props,state){console.log('getDerivedStateFromProps',props,state);return null}//在更新之前获取快照getSnapshotBeforeUpdate(){console.log('getSnapshotBeforeUpdate');return 'atguigu'}//组件挂载完毕的钩子componentDidMount(){console.log('Count---componentDidMount');}//组件将要卸载的钩子componentWillUnmount(){console.log('Count---componentWillUnmount');}//控制组件更新的“阀门”shouldComponentUpdate(){console.log('Count---shouldComponentUpdate');return true}//组件更新完毕的钩子componentDidUpdate(preProps,preState,snapshotValue){console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);}render(){console.log('Count---render');const {count} = this.statereturn(<div><h2>当前求和为:{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载组件</button><button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button></div>)}}//渲染组件ReactDOM.render(<Count count={199}/>,document.getElementById('test'))</script>
</body>
</html>

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate的使用场景</title><style>.list{width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news{height: 30px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script><script type="text/babel">class NewsList extends React.Component{state = {newsArr:[]}componentDidMount(){setInterval(() => {//获取原状态const {newsArr} = this.state//模拟一条新闻const news = '新闻'+ (newsArr.length+1)//更新状态this.setState({newsArr:[news,...newsArr]})}, 1000);}getSnapshotBeforeUpdate(){return this.refs.list.scrollHeight}componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height}render(){return(<div className="list" ref="list">{this.state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM.render(<NewsList/>,document.getElementById('test'))</script>
</body>
</html>

5. 重要的勾子

  • render:初始化渲染或更新渲染调用
  • componentDidMount:开启监听,发送ajax请求
  • componentWillUnmount:做一些收尾工作,如:清理定时器

6. 即将废弃的勾子

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。

七、虚拟DOM与DOM Diffing算法

1. 效果

请添加图片描述

2. 基本原理图

请添加图片描述

3. 代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>1_验证diff算法</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script><script type="text/babel">class Time extends React.Component {state = {date: new Date()}componentDidMount () {setInterval(() => {this.setState({date: new Date()})}, 1000)}render () {return (<div><h1>hello</h1><input type="text"/><span>现在是:{this.state.date.toTimeString()}<input type="text"/></span></div>)}}ReactDOM.render(<Time/>,document.getElementById('test'))
</script>
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>2_key的作用</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel -->
<script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/*经典面试题:1). react/vue中的key有什么作用?(key的内部原理是什么?)2). 为什么遍历列表时,key最好不要用index?1. 虚拟DOM中key的作用:1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:a. 旧虚拟DOM中找到了与新虚拟DOM相同的key:(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM(2).若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOMb. 旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据创建新的真实DOM,随后渲染到到页面2. 用index作为key可能会引发的问题:1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。2. 如果结构中还包含输入类的DOM:会产生错误DOM更新 ==> 界面有问题。3. 注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。3. 开发中如何选择key?:1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果确定只是简单的展示数据,用index也是可以的。*//* 慢动作回放----使用index索引值作为key初始数据:{id:1,name:'小张',age:18},{id:2,name:'小李',age:19},初始的虚拟DOM:<li key=0>小张---18<input type="text"/></li><li key=1>小李---19<input type="text"/></li>更新后的数据:{id:3,name:'小王',age:20},{id:1,name:'小张',age:18},{id:2,name:'小李',age:19},更新数据后的虚拟DOM:<li key=0>小王---20<input type="text"/></li><li key=1>小张---18<input type="text"/></li><li key=2>小李---19<input type="text"/></li>-----------------------------------------------------------------慢动作回放----使用id唯一标识作为key初始数据:{id:1,name:'小张',age:18},{id:2,name:'小李',age:19},初始的虚拟DOM:<li key=1>小张---18<input type="text"/></li><li key=2>小李---19<input type="text"/></li>更新后的数据:{id:3,name:'小王',age:20},{id:1,name:'小张',age:18},{id:2,name:'小李',age:19},更新数据后的虚拟DOM:<li key=3>小王---20<input type="text"/></li><li key=1>小张---18<input type="text"/></li><li key=2>小李---19<input type="text"/></li>*/class Person extends React.Component{state = {persons:[{id:1,name:'小张',age:18},{id:2,name:'小李',age:19},]}add = ()=>{const {persons} = this.stateconst p = {id:persons.length+1,name:'小王',age:20}this.setState({persons:[p,...persons]})}render(){return (<div><h2>展示人员信息</h2><button onClick={this.add}>添加一个小王</button><h3>使用index(索引值)作为key</h3><ul>{this.state.persons.map((personObj,index)=>{return <li key={index}>{personObj.name}---{personObj.age}<input type="text"/></li>})}</ul><hr/><hr/><h3>使用id(数据的唯一标识)作为key</h3><ul>{this.state.persons.map((personObj)=>{return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text"/></li>})}</ul></div>)}}ReactDOM.render(<Person/>,document.getElementById('test'))
</script>
</body>
</html>

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

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

相关文章

elasticsearch的索引库操作

索引库就类似数据库表&#xff0c;mapping映射就类似表的结构。我们要向es中存储数据&#xff0c;必须先创建“库”和“表”。 mapping映射属性 mapping是对索引库中文档的约束&#xff0c;常见的mapping属性包括&#xff1a; type&#xff1a;字段数据类型&#xff0c;常见的…

大数据课程K18——Spark的ALS算法与显式矩阵分解

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Spark的ALS算法与显式矩阵分解; ⚪ 掌握Spark的ALS算法原理; 一、ALS算法与显式矩阵分解 1. 概述 我们在实现推荐系统时,当要处理的那些数据是由用户所提供的自身的偏好数据,这些…

k8s node环境部署(三)

1、添加node1、node2环境 前面配置master环境的截图最后一段 复制下来 分别在node主机执行 kubeadm join 192.168.37.132:6443 --token p5omh3.cqjqt8ymrwkdn2fc \ --discovery-token-ca-cert-hash sha256:608a1cbadd060cfdeac2fae84c19609061b750ab51bf9a19887ff7ea…

Ubuntu之apt-get系列--安装JDK8--方法/教程

原文网址&#xff1a;Ubuntu之apt-get系列--安装JDK8--方法/教程_IT利刃出鞘的博客 简介 本文介绍如何在Ubuntu下安装JDK8。 验证是否安装 可以通过如下命令判断系统是否有安装ssh服务&#xff1a; 命令 java -version 结果 如上所示&#xff0c;表示还没有安装。 查看…

实训三:多表查询 - 大学数据库创建与查询实战

大学数据库创建与查询实战 第1关&#xff1a;数据库表设计任务描述相关知识大学数据库的整体设计教师信息表&#xff08;instructor&#xff09;开课信息表&#xff08;section&#xff09; 编程要求测试说明参考代码 第2关&#xff1a;查询&#xff08;一&#xff09;任务描述…

[虚幻引擎插件介绍] DTGlobalEvent 蓝图全局事件, Actor, UMG 相互回调,自由回调通知事件函数,支持自定义参数。

本插件可以在虚幻的蓝图 Actor&#xff0c; Obiect&#xff0c;UMG 里面指定绑定和执行消息&#xff0c;可带自定义参数。 参数支持 Bool&#xff0c;Byte&#xff0c;Int&#xff0c;Int64&#xff0c;Float&#xff0c;Name&#xff0c;String&#xff0c;Text&#xff0c;Ve…

Ubuntu 20.04 LTS 安装Kubernetes 1.26

1、环境配置 (1)添加主机名称解析记录 cat > /etc/hosts << EOF 192.168.44.200 master01 master01.bypass.cn 192.168.44.201 node01 node01.bypass.cn 192.168.44.202 node02 node02.bypass.cn EOF(2)禁止K8s使用虚拟内存 swapoff -a sed -ri s(.*swap.*)#\1…

自然语言处理:提取长文本进行文本主要内容(文本意思)概括 (两种方法,但效果都一般)

本文主要针对长文本进行文本提取和中心思想概括&#xff0c;原文档放在了附件里面&#xff1a;<科大讯飞公告> -----------------------------------方法一&#xff1a;jieba分词提取文本&#xff08;句子赋分法&#xff09;------------------------- 1、首先导入相关…

方向介绍:基于深度学习的轨迹预测

方向介绍&#xff1a;基于深度学习的轨迹预测 文章目录 方向介绍&#xff1a;基于深度学习的轨迹预测问题定义典型方法挑战未来展望参考 基于深度学习的轨迹预测是一种利用神经网络模型来预测移动物体的未来位置和运动状态的技术。这种技术在许多领域都有重要的应用&#xff0c…

Nosql数据库服务之redis

Nosql数据库服务之redis 一图详解DB的分支产品 Nosql数据库介绍 是一种非关系型数据库服务&#xff0c;它能解决常规数据库的并发能力&#xff0c;比如传统的数据库的IO与性能的瓶颈&#xff0c;同样它是关系型数据库的一个补充&#xff0c;有着比较好的高效率与高性能。 专…

AlexNet 06

一、发展 1989年&#xff0c;Yann LeCun提出了一种用反向传导进行更新的卷积神经网络&#xff0c;称为LeNet。 1998年&#xff0c;Yann LeCun提出了一种用反向传导进行更新的卷积神经网络&#xff0c;称为LeNet-5 AlexNet&#xff0c;VGG&#xff0c;GoogleNet&#xff0c;R…

运维监控系统PIGOSS BSM 业务监控 大屏展现解析

“业务大屏”是 PIGOSS BSM&#xff08;IT运维监控工具&#xff09;的特色功能之一&#xff0c;旨在提供综合而直观的业务监控视图。该功能主要由三个组成部分构成&#xff1a;业务健康度雷达图、业务状态矩阵和多趋势对比图。 下面将对每个部分进行详细介绍&#xff1a; 业务健…

支持向量机

一、支持向量机 1. 基本概念 1&#xff09;什么是支持向量机 支持向量机&#xff08;Support Vector Machines&#xff09;是一种二分类模型&#xff0c;在机器学习、计算机视觉、数据挖掘中广泛应用&#xff0c;主要用于解决数据分类问题&#xff0c;它的目的是寻找一个超平…

CDN+GitHub搭建图床

前期搭建博客的时候&#xff0c;老是遇到图片无法加载、加载出错等等问题&#xff0c;很是烦恼。于是想搭建一个图床&#xff0c;进行个人博客图片的存储、显示使用。 ​ 利用GitHubjsDelivrPicGo搭建免费图床&#xff0c;CDN图床就是这么朴实无华&#xff0c;是基于免费CDN与免…

敏感信息防泄漏:透明加密与通信内容安全策略深度解析

随着信息技术的迅猛发展&#xff0c;计算机和网络已经成为了我们日常生活中不可或缺的工具&#xff0c;用于办公、通信和协作。尽管这些信息系统提高了工作效率&#xff0c;但也引发了一系列与信息安全相关的问题&#xff0c;例如如何有效地保护存储在这些系统中的关键数据&…

【C++漂流记】函数的高级应用——函数默认参数、占位参数、重载

函数的高级应用&#xff0c;侧重介绍函数的默认参数、函数的占位参数、函数重载定义解释及使用。 文章目录 一、函数的默认参数二、函数的占位参数三、函数重载函数重载的注意事项 一、函数的默认参数 函数默认参数是指在函数声明时为参数提供一个默认值&#xff0c;这样在调…

算法通关村第十三关——溢出问题处理模板

前言 溢出问题是面试当中输出涉及到数字的一个需要特别注意的地方&#xff0c;典型的题目有三个&#xff1a;数字反转&#xff0c;将字符串转成数字和回文数。 1.整数反转 力扣7题&#xff0c;给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。…

数据库误修改后的数据恢复

一不小心将数据库数据修改了&#xff0c;而且回滚无效&#xff0c;于是去尝试各种方法恢复数据 查询到修改时间点之前的数据 恢复数据 恢复数据库被修改数据的流程及代码&#xff0c;这里被修改的表是AUTH_USER,实际应用填写对应表名。 -- 通过时间恢复删除且已提交的数据-- 1…

JDK1.8下载、安装和环境配置使用

JDK1.8下载、安装和配置 下载安装包解压文件配置测试安装 下载安装包 链接地址 https://pan.baidu.com/s/1RF7-ulq0_qAelpXskDxdvA 提取码 d1y0解压文件 jdk1.8.0_181 配置 右击我的电脑&#xff0c;选择属性 2.点击高级系统设置 在系统变量区里点击&#xff1a;新建…

2023年高教社杯数学建模国赛C题详细版思路

C 题 蔬菜类商品的自动定价与补货决策 2023年国赛如期而至&#xff0c;为了方便大家尽快确定选题&#xff0c;这里将对C题进行解题思路说明&#xff0c;以分析C题的主要难点、出题思路以及选择之后可能遇到的难点进行说明&#xff0c;方便大家尽快找到C题的解题思路。 难度排…