(React生命周期)前端八股文修炼Day8

在这里插入图片描述

一 React的生命周期有哪些

React组件的生命周期可以分为三个主要阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting)。React类组件的生命周期方法允许你在组件的不同阶段执行代码。

挂载(Mounting)

这个阶段是组件实例被创建并插入DOM中的阶段。它包括以下生命周期方法:

  1. constructor(props):组件的构造函数,最先被执行,用于初始化状态和绑定事件处理器。
  2. static getDerivedStateFromProps(props, state):在组件实例化后和接收新的props之前被调用。它应返回一个对象来更新状态,或者返回null来不更新任何内容。
  3. render():唯一必须实现的方法,读取propsstate,并返回React元素。
  4. componentDidMount():在组件挂载(即插入DOM树中)后立即调用。这是执行副作用操作(如Ajax请求、DOM操作等)的好地方。

更新(Updating)

这个阶段开始于组件的propsstate发生变化时,导致重新渲染。它包括以下生命周期方法:

  1. static getDerivedStateFromProps(props, state):此方法在组件创建时和接收新的props时被调用。
  2. shouldComponentUpdate(nextProps, nextState):在接收到新的propsstate之前立即调用,返回一个布尔值。返回false则不会继续更新过程。
  3. render():在组件更新时被调用,根据propsstate返回一个新的React元素。
  4. getSnapshotBeforeUpdate(prevProps, prevState):在最近一次渲染输出(提交到DOM节点)之前调用。它允许你从DOM捕获一些信息(如滚动位置)。
  5. componentDidUpdate(prevProps, prevState, snapshot):在更新发生后立即被调用。可以在此处执行DOM操作或进行网络请求。

卸载(Unmounting)

这是组件被移除并销毁的阶段。它包括以下生命周期方法:

  1. componentWillUnmount():在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,如无效定时器的清理、取消网络请求等。

错误处理(Error Handling)

React 16引入了错误边界的概念,可以捕获其子组件树中的JavaScript错误,记录这些错误,并显示一个备用UI。

  1. static getDerivedStateFromError(error):当后代组件抛出错误时,用于渲染备用UI。
  2. componentDidCatch(error, info):当后代组件抛出错误时被调用,用于记录错误信息。

上述是React类组件的生命周期方法。需要注意的是,React 16.8引入了Hooks,允许你在函数组件中使用状态和其他React特性,如useStateuseEffect等,从而在很多场景下可以替代传统的类组件及其生命周期方法。

二 React 废弃了哪些生命周期?为什么

React在其更新过程中,为了改进框架的性能和开发体验,已经废弃(或不推荐使用)了一些生命周期方法。主要的变更发生在React 16.3版本引入的新的生命周期方法,并且在React 17中继续保持。主要废弃的生命周期方法包括:

  1. componentWillMount()(已废弃):在React早期版本中,这个方法在组件挂载到DOM之前被调用。React团队发现,这个方法经常被误用,例如在服务器渲染中执行浏览器特定的代码,或者用于数据加载操作,这些操作更适合在componentDidMount()中进行。此外,为了支持异步渲染,即React未来版本中的并发模式,componentWillMount()的调用时机变得不可预测。

  2. componentWillReceiveProps()(已废弃):这个方法在组件接收到新的props之前调用。它经常被用于根据新的props更新组件的状态。React团队发现,这种模式可能导致bug,特别是在异步渲染的环境中。因此,推荐使用static getDerivedStateFromProps()方法代替。

  3. componentWillUpdate()(已废弃):这个方法在接收到新的propsstate,且在渲染之前被调用。它经常被用于准备更新,如获取新的数据。但是,与componentWillReceiveProps()相同,componentWillUpdate()与异步渲染不兼容,因此React团队引入了getSnapshotBeforeUpdate()来替代其部分使用场景。

为什么废弃这些生命周期

主要有两个原因:

  1. 改善异步渲染的兼容性:为了支持React的并发模式(Concurrent Mode),这需要改变组件生命周期的调用时机。并发模式允许React中断渲染工作,以优先响应更高优先级的工作。废弃的生命周期方法在这种模式下可能会被多次调用或在不预期的时机被调用,从而引入bug。

  2. 促进更好的开发习惯:通过引导开发者避免使用一些容易导致bug的模式(如在构造函数外修改状态,或在组件更新前后进行不必要的操作),React团队希望促进更健壮、可预测的组件开发实践。

作为替代,React引入了新的生命周期方法(如static getDerivedStateFromProps()getSnapshotBeforeUpdate()),并推荐使用Hooks(在函数组件中)来替代这些废弃的生命周期方法,这些新引入的APIs和机制更加适合异步渲染的需求,并鼓励采用更好的开发模式。

三 Hooks与生命周期的关系

React Hooks是在React 16.8版本中引入的,它们允许你在不编写类组件的情况下使用state和其他React特性。Hooks的引入部分是为了解决类组件中存在的问题,包括复杂组件难以理解和重用、难以理解的生命周期方法、以及逻辑难以分离等。Hooks提供了一种更简单、更直观的方式来共享和管理状态逻辑,同时也保留了React的声明式编程模型。

Hooks与生命周期方法的对应关系

虽然Hooks并不直接对应类组件的生命周期方法,但是你可以用Hooks实现相同的生命周期功能。下面是一些常用的React Hooks,以及它们如何与类组件的生命周期方法相关联:

  1. useState: 提供函数组件内部状态的能力,它不直接对应到任何生命周期方法,但你可以将其视为this.statethis.setState方法的替代。

  2. useEffect: 这个Hook功能强大,它可以用来模拟类组件中几乎所有的生命周期方法。通过不同的使用方式,useEffect可以实现componentDidMountcomponentDidUpdatecomponentWillUnmount的功能。

    • 模拟componentDidMount: 传递一个空数组[]作为useEffect的第二个参数(依赖数组),这样useEffect中的回调函数就只会在组件挂载后执行一次。
    • 模拟componentDidUpdate: 通过在依赖数组中指定变量,你可以让useEffect仅在这些变量改变时执行。
    • 模拟componentWillUnmount: 在useEffect的回调函数中返回一个清理函数,这个清理函数会在组件卸载时执行。
  3. useContext: 允许你在函数组件中访问React的Context对象,用于共享状态或方法等,这不直接对应于生命周期方法,但提供了一种在组件间共享数据的方式,类似于在类组件中使用静态contextType属性或<Consumer>组件。

  4. useMemouseCallback: 这两个Hooks用于优化性能,通过记忆计算结果或回调函数,从而避免在每次渲染时都进行重计算或重新创建函数。虽然它们不直接对应生命周期方法,但它们帮助管理因组件更新而引发的性能问题。

总的来说,Hooks提供了一种更灵活的方式来复用逻辑、管理状态、以及与组件的生命周期等同步,与类组件的生命周期方法相比,Hooks使得组件逻辑更容易组织和理解,同时也更容易测试。通过使用Hooks,开发者可以更加集中地关注组件的逻辑,而不是管理生命周期方法的复杂性。

四 React 16.X 中 props 改变后在哪个生命周期中处理

在React 16.x中,当组件的props发生变化时,主要在下列生命周期方法中处理这些变更:

  1. static getDerivedStateFromProps(props, state): 这个方法在props传入后,以及在任何state变化时,都会被调用。它返回一个对象来更新state,或者返回null来表明新的props不需要更新state。这是一个静态方法,意味着你无法在其中使用this。这个方法适用于根据props的变化来更新state的情况。

    static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.someValue !== prevState.someValue) {return { someState: nextProps.someValue };}return null;
    }
    
  2. componentDidUpdate(prevProps, prevState, snapshot): 这个方法在组件完成更新后立即调用,但不会在初次渲染时调用。它允许你在组件更新后进行DOM操作或执行某些后续处理。如果你的组件依赖于props的变化来执行副作用操作(例如,数据提取、手动变更DOM等),这是一个合适的地方。

    componentDidUpdate(prevProps) {if (this.props.userID !== prevProps.userID) {this.fetchData(this.props.userID);}
    }
    

在早期版本的React中,componentWillReceiveProps(nextProps)生命周期方法被用于props变化时的处理。然而,从React 16.3版开始,componentWillReceiveProps已被标记为即将废弃(不推荐使用),并在React 17中被彻底移除。React团队推荐使用getDerivedStateFromProps来代替componentWillReceiveProps进行基于props变化的state更新,以及使用componentDidUpdate来处理props变化后的逻辑。

需要注意的是,如果你在处理props变化时发现自己需要执行副作用(如API调用等),则应考虑使用componentDidUpdate。如果需要根据props的变化来更新组件的内部状态,则应使用getDerivedStateFromProps

五 React 性能优化在哪个生命周期?它优化的原理是什么

在React中,性能优化可以在多个生命周期方法中进行,但最关键的生命周期方法是shouldComponentUpdate。此外,在React 16.3及以后的版本中,引入了React.PureComponentReact.memo作为性能优化的工具。

shouldComponentUpdate

shouldComponentUpdate方法允许组件在接收到新的props或state之前决定是否重新渲染。它的默认行为是每次在接收新的props或state时返回true,导致组件重新渲染。如果你知道在某些情况下组件的更新是不必要的,可以在shouldComponentUpdate中返回false来避免重新渲染,从而优化性能。

shouldComponentUpdate(nextProps, nextState) {// 检查是否真的需要更新组件return nextProps.id !== this.props.id;
}

React.PureComponent

React.PureComponentComponent相似,但PureComponent通过对props和state的浅比较来自动实现了shouldComponentUpdate方法。如果组件的props和state在浅层级上都没有变化,则不会重新渲染。这可以在某些情况下提高性能,特别是当组件的渲染输出仅依赖于浅层props和state时。

React.memo

React.memo是一个高阶组件,它类似于PureComponent,但用于函数组件。它可以阻止组件的不必要渲染,通过对组件的props进行浅比较来实现。

const MyComponent = React.memo(function MyComponent(props) {/* 渲染逻辑 */
});

优化原理

上述方法的核心优化原理基于避免不必要的渲染。React的渲染过程包括创建虚拟DOM、与上一次的虚拟DOM进行比较(diffing)、并根据比较结果更新实际DOM。这个过程可以是昂贵的,特别是当组件树很大时。如果能够减少渲染次数,或减少需要进行diffing的组件数量,就可以显著提高应用性能。

通过shouldComponentUpdateReact.PureComponentReact.memo,我们可以控制哪些组件应当进行更新,哪些可以跳过更新过程。通过减少不必要的更新,我们减少了diffing和重新渲染的需要,从而提高了应用的性能。

综上所述,性能优化主要是通过减少不必要的组件渲染和diff计算来实现的,而shouldComponentUpdateReact.PureComponentReact.memo是实现这一目标的主要工具。

六 state 和 props 触发更新的生命周期分别有什么区别

在React中,stateprops的更新都能触发组件的重新渲染,但它们在触发更新时涉及的生命周期方法有所不同。理解这些差异有助于更有效地管理组件的行为和性能。以下是基于类组件的生命周期方法的讨论,因为它们在生命周期管理方面提供了明确的钩子。

props更新时

  1. getDerivedStateFromProps(props, state): 当组件实例化及接收新的props时被调用。它可以用来根据props的变化来更新state

  2. shouldComponentUpdate(nextProps, nextState): 在接收新的propsstate后,紧接着getDerivedStateFromProps执行。它决定了组件是否应该更新。如果此方法返回false,则不会继续更新流程(render, componentDidUpdate等不会被调用)。

  3. render: 如果shouldComponentUpdate返回true,则render方法会被调用来重新渲染界面。

  4. componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后被调用。可以在这里执行依赖于DOM的操作或进行网络请求等异步操作,但应当小心不要引起无限更新循环。

state更新时

  1. shouldComponentUpdate(nextProps, nextState): 当通过setState触发state更新时,该方法同样被调用。它允许组件在更新之前决定是否需要重新渲染。

  2. render: 如果shouldComponentUpdate返回true,则render方法会被调用来重新渲染界面。

  3. componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后被调用,同样适用于state更新。

区别

  • 更新源头: props更新通常源于父组件向子组件传递新的props,而state更新则是由组件内部的setState方法触发。
  • 生命周期方法: getDerivedStateFromPropsprops更新时会被调用,用于将props的变化映射到state上。而在state更新时,没有专门的生命周期方法在更新前被调用。两者都会触发shouldComponentUpdatecomponentDidUpdate
  • 控制更新: 对于propsstate的更新,都可以通过shouldComponentUpdate来控制组件是否应当更新,进而优化性能。

理解这些区别有助于开发人员更有效地使用React的生命周期方法,从而创建高效的、响应迅速的Web应用。

七 React中发起网络请求应该在哪个生命周期中进行?为什么

在React的类组件中,发起网络请求通常应该放在componentDidMount生命周期方法中。对于函数组件,使用Effect Hook(useEffect)来处理副作用,包括网络请求,是推荐的方式。

类组件中使用componentDidMount

componentDidMount在组件的生命周期中仅被调用一次,这发生在组件被渲染到DOM后。这样做有几个优点:

  • 避免不必要的重新渲染:将网络请求放在componentDidMount中,可以确保数据只在组件首次渲染后获取,从而避免由于组件状态更新导致的额外渲染。
  • 保证组件已挂载:在此生命周期方法中发起网络请求可以确保组件已经被挂载到DOM上,这意味着你可以安全地在请求成功后更新组件的状态,并且能够确保这些状态更新会引起组件的重新渲染。

函数组件中使用useEffect

对于函数组件,React 提供了useEffect Hook 来处理副作用,包括执行网络请求等异步操作。useEffect可以接收一个函数,React将在完成DOM更新后调用这个函数:

useEffect(() => {// 你的网络请求或其他副作用逻辑fetchData();
}, []); // 空数组意味着这个effect仅在组件挂载后运行一次

将空数组[]作为useEffect的第二个参数,可以确保副作用仅在组件挂载和卸载时运行,模拟了componentDidMountcomponentWillUnmount的行为。

为什么不在componentWillMountconstructor中?

  • constructor: 在构造函数中发起网络请求不是个好主意,因为此时组件尚未挂载,且如果构造函数触发重新渲染(例如,通过状态更新),则可能导致多次不必要的请求。
  • componentWillMount(已废弃): 在componentWillMount中发起网络请求也不推荐,因为它可能会在组件挂载前被调用多次(尤其是在未来的React版本中,随着异步渲染的引入)。这可能导致网络请求被不必要地多次执行。

总之,将网络请求置于componentDidMount或使用useEffect Hook 是基于确保组件已经挂载、避免不必要的重复请求以及遵循React的最佳实践的考虑。这样做既保证了数据的正确加载,又优化了组件的性能和可维护性。

八 React 16中新生命周期有哪些

React 16引入了几个新的生命周期钩子,旨在提高组件的可维护性与性能,同时也对一些旧的生命周期方法进行了标记,以在未来的版本中弃用。这些变化主要是为了配合React的异步渲染功能。下面是React 16中引入的一些新的生命周期方法:

static getDerivedStateFromProps(props, state)

这个静态方法在组件创建时和接收新的props时被调用。它应返回一个对象来更新state,或者返回null来表明新的props不需要更新任何state。这个生命周期方法是componentWillReceiveProps的替代品,用于准备更新阶段的state

getSnapshotBeforeUpdate(prevProps, prevState)

这个方法在最近一次渲染输出(提交到DOM节点)之前被调用。它使得组件能够在发生可能的改变之前从DOM中捕获一些信息(例如,滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()

这些方法的添加是为了更好地支持异步渲染模式,使得在React的未来版本中,组件生命周期的管理更加灵活和高效。

弃用的生命周期方法(在React 16.x中标记为不安全)

  • componentWillMount(在React 17.x中被重命名为UNSAFE_componentWillMount
  • componentWillReceiveProps(在React 17.x中被重命名为UNSAFE_componentWillReceiveProps
  • componentWillUpdate(在React 17.x中被重命名为UNSAFE_componentWillUpdate

这些方法在React 16中仍然可用,但在开发者控制台中会生成警告,建议使用新的生命周期方法或其他替代方案。

推荐的模式

React团队鼓励开发者使用新的生命周期方法替代旧的将要被弃用的方法,并在可能的情况下,利用函数组件与Hooks,这些都是在React 16.8版本中引入的概念,以支持使用更现代的、更简洁的方式来编写组件与管理状态。

请注意,随着React版本的更新,推荐的最佳实践可能会发生变化,因此建议定期查阅React官方文档来获取最新的指导。

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

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

相关文章

golang的引用和非引用总结

目录 概述 一、基本概念 指针类型&#xff08;Pointer type&#xff09; 非引用类型&#xff08;值类型&#xff09; 引用类型&#xff08;Reference Types&#xff09; 解引用&#xff08;dereference&#xff09; 二、引用类型和非引用类型的区别 三、golang数据类型…

7-20 打印九九口诀表

题目链接&#xff1a;7-20 打印九九口诀表 一. 题目 1. 题目 2. 输入输出格式 3. 输入输出样例 4. 限制 二、代码 1. 代码实现 #include <stdio.h>int main(void) {unsigned int n;if (scanf("%d", &n) ! 1) {return -1;}for (int i 1; i < n; i) …

线程池详解

线程池 什么是线程池&#xff1a;线程池就是管理一系列线程的资源池。 当有任务要处理时&#xff0c;直接从线程池中获取线程来处理&#xff0c;处理完之后线程并不会立即被销毁&#xff0c;而是等待下一个任务。 为什么要用线程池 / 线程池的好处&#xff1a; **降低资源消…

FPGA开源项目分享——基于 DE1-SOC 的 String Art 实现

导语 今天继续康奈尔大学FPGA课程ECE 5760的典型案例分享——基于DE1-SOC的String Art实现。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 ECE 5760 Final Project 项目说明 String Art起源于19世纪的数学…

Taro打包生成不同目录

使用taro init创建taro项目时&#xff0c;taro默认打包目录是&#xff1a; /config/index.js outputRoot:dist默认的目录&#xff0c;编译不同平台代码时就会覆盖掉&#xff0c;为了达到多端同步调试的目的&#xff0c;这时需要修改默认生成目录了&#xff0c;通过查看官方文…

【MySQL数据库 | 第二十六篇】InnoDB基本数据存储单元以及存在问题

前言&#xff1a; InnoDB作为MySQL中最常用的存储引擎之一&#xff0c;承载着许多数据库系统的关键任务&#xff0c;如事务管理、并发控制和数据完整性保障。 然而&#xff0c;就像任何技术一样&#xff0c;InnoDB也并非完美无缺。在深入了解其工作原理和特性的同时&#xff…

ExoPlayer停止更新,建议升级到AndroidX Media3

1. 大家常用的ExoPlayer地址&#xff1a;GitHub - google/ExoPlayer: An extensible media player for Android ExoPlayer是谷歌官方提供的媒体播放库&#xff0c;大家在开发项目中经常使用ExoPlayer播放音视频&#xff0c;谷歌官方已经明确表示该库在2024-04-03停止更新&…

鸿蒙Native输出so动态库,并提供给第三方导入使用

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 API:9 最近在学习鸿蒙的Native输出so动态库&#xff0c;下面就给大家分享下我的学习心得及在实现过程中遇到的问题。 实现需求&#xff1a;通过so库输出文本内容 “你好&#xff0c;鸿蒙&#xff01;” 参考资料…

CSS 使用 SVG 绘制动态皮筋与小球交互动画

CSS 使用 SVG 绘制动态皮筋与小球交互动画 效果展示 CSS 知识点 使用 animation 控制 SVG 的 path 属性执行动画使用 CSS 设置 SVG 部分属性 整体页面布局 <div class"elasic"><!-- 小球 --><div class"ball"></div><!-- 皮…

Nodejs 第六十二章(短链接)

短链接介绍 短链接是一种缩短长网址的方法&#xff0c;将原始的长网址转换为更短的形式。它通常由一系列的字母、数字和特殊字符组成&#xff0c;比起原始的长网址&#xff0c;短链接更加简洁、易于记忆和分享。 短链接的主要用途之一是在社交媒体平台进行链接分享。由于这些…

人工智能:更多有用的 Python 库

​ 目录 推荐 JupyterLab 入门 复杂的矩阵运算 其它人工智能和机器学习的 Python 库 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 在进入主题之前&#xff0c;我们先讨论几个人…

利用Sentinel解决雪崩问题(二)隔离和降级

前言&#xff1a; 虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。而要将这些故障控制在一定范围避免雪崩&#xff0c;就要靠线程隔离(舱壁模式)和熔断降级手段了&#xff0c;不管是线程隔离还是熔断降级&#xff0c;都是对客户端(调…

太赫兹探测器是太赫兹技术应用核心器件之一 我国研究成果不断增多

太赫兹探测器是太赫兹技术应用核心器件之一 我国研究成果不断增多 太赫兹探测器&#xff0c;是太赫兹&#xff08;THz&#xff09;应用的基础&#xff0c;是太赫兹成像、太赫兹通信等系统的核心器件&#xff0c;其性能直接决定太赫兹系统的优劣&#xff0c;地位极为重要&#x…

2024年同城网总流量全新生态,个人工作室落地式游戏玩法,单账户月入3万

我要为大家解读的是本地生活新项目&#xff0c;这个业务模式中&#xff0c;即使是低收入的玩法&#xff0c;一个月赚取万儿八千也是完全可行的。而高收入的玩法&#xff0c;一单的收入甚至能超过一万。目前&#xff0c;你的圈子里已经有一些同行业的人开始以个人工作室的形式去…

【机器学习】数学基础详解

线性代数&#xff1a;构建数据的骨架 数学对象 标量&#xff08;Scalar&#xff09; 标量是最基本的数学对象&#xff0c;代表了单个的数值&#xff0c;无论是整数还是实数。在机器学习中&#xff0c;标量可以用来表示一个模型的单个参数&#xff0c;如偏差&#xff08;bias&…

Collection与数据结构 Stack与Queue(二):队列与Queue

1. 队列 1.1 概念 只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾&#xff08;Tail/Rear&#xff09; 出队列&#xff1a;进行删除操作…

免费https详细教程

简单叙述一下https的定义和实现https的一些基本作用&#xff0c;然后会给到申请SSL证书的方式以及安装部署流程&#xff0c;最终实现网站的https访问。 随着互联网的快速发展&#xff0c;网络安全问题日益凸显。在互联网上传输敏感信息、进行在线交易和共享个人数据时&#xf…

09 Php学习:数组和排序

数组概念 在PHP中&#xff0c;数组是一种复合数据类型&#xff0c;用于存储多个值。以下是关于PHP数组的详细解释&#xff1a; 索引数组&#xff1a;索引数组是最基本的数组类型&#xff0c;其中每个元素都有一个唯一的数字索引&#xff0c;从0开始递增。 关联数组&#xff…

Qt for MCUs 2.7正式发布

本文翻译自&#xff1a;Qt for MCUs 2.7 released 原文作者&#xff1a;Qt Group高级产品经理Yoann Lopes 翻译&#xff1a;Macsen Wang Qt for MCUs的新版本已发布&#xff0c;为Qt Quick Ultralite引擎带来了新功能&#xff0c;增加了更多MCU平台的支持&#xff0c;并且我们…

概率论基础——拉格朗日乘数法

概率论基础——拉格朗日乘数法 概率论是机器学习和优化领域的重要基础之一&#xff0c;而拉格朗日乘数法与KKT条件是解决优化问题中约束条件的重要工具。本文将简单介绍拉格朗日乘数法的基本概念、应用以及如何用Python实现算法。 1. 基本概念 拉格朗日乘数法是一种用来求解…