他是当前前端最热门的两个框架。无论采访还是工作都是前端开发人员必须掌握的。
今天，我们通过比较方式学习生活的生命周期。
本文首先讨论了旧版本的生命周期，旧版本和新版本，然后分析旧版本的三个生命周期方法的问题，以及新版本中的替代方法。总结了生命周期这一部分的相同点和差异。
我希望通过这种比较方法，我们学习时会给我们留下深刻的印象，并希望帮助所有人。
生命周期功能可用
引用官方网站的图片，每个生命周期功能运行如下
让我们专注于分析每个功能。
当组件初始化时，beforecreate运行，并且仅运行一次。您可以在此功能中调用背景接口以获取数据。
此功能无法获得元素。
当组件被初始化并且仅运行一次时，创建的运行。您可以在此功能中调用背景接口以获取数据。
此功能可以获得数据侦听，计算属性，方法，事件/侦听器的回调功能，但仍然无法获得元素。
当组件被初始化时，beforemount运行，并且仅运行一次。您可以在此功能中调用背景接口以获取数据。
在服务器渲染期间，未调用钩子。
当组件被初始化并且仅运行一次时，安装运行。您可以在此功能中调用背景接口以获取数据。
此功能可以获得数据侦听，计算属性，方法，事件/侦听器的回调功能，还可以获取元素。
在服务器渲染期间，未调用钩子。
在更改数据后，请在更新之前调用Update之前。它适用于更新之前的现有访问权限，例如删除手动添加事件监视器。
在服务器侧渲染期间未调用钩子，因为仅在服务器端执行第一个渲染
在数据更改引起的虚拟重新施用和更新后，调用更新。
请注意，所有子类都不能保证被重新授予。如果您想等待整个视图呈现，则可以在内部使用它：
在服务器侧渲染期间未调用钩子，因为仅在服务器端执行第一个渲染
在卸载组件实例之前，请调用呼叫。在此阶段，该实例仍然完全正常。
在服务器渲染期间，未调用钩子。
卸载组件实例后被命令被摧毁。当调用此挂钩时，抬起组件实例的所有指令并串联，所有事件侦听器都会被删除，并且所有Subsot实例均已卸载。
在服务器渲染期间未调用此钩子
在捕获后代组件中的错误时，请调用errorcapture。此挂钩将接收三个参数：错误对象，发生的组件实例以及包含错误源信息的字符串。此挂钩可以返回以防止错误继续传播。
您可以在此挂钩中修改组件的状态。因此，重要的是在模板或渲染函数中有条件判断以绕过模板或渲染函数中的其他内容；否则，该组件可以输入无限的渲染循环。
错误传播规则
激活缓存组件时调用活动。
在服务器渲染期间，未调用钩子。
当缓存组件丢失时停用呼叫。
在服务器渲染期间，未调用钩子。
让我们在下面的不同情况下进行详细分析
单个组件初始化
单个组件更新
卸下
父亲和儿子的成分初始化
父亲组件更新数据，此数据未传递给子组件
父亲组件更新数据，此数据传递给子女组件
副校长更新数据
父亲和儿子组成部分卸载
引用官方网站的图片，每个生命周期功能运行如下
选项写作没有生命周期的功能，所有这些都保留和支持。
新添加，两种生命周期方法。
中国生命周期的方法名称也从，从，从，从而更好地相应。
该功能中生命周期方法的名称已更改，也就是说，它是在添加之前。并且不支持该功能。
如果存在，生命周期功能的运行顺序是
总结
除了更改上一个方法中的名称外，功能还没有更改。因此，我们专注于新方法和两个方法。
简单的简单理解是模板中执行了哪些操作，以及操作的目标对象和键。
如果有多个属性，则将多次触发此方法。
让我们看一下示例
页面上的第一个负载只会触发该方法。
由于使用了模板，因此该方法将被触发两个输出。因为它定义了，它始终是，并且只是读取操作，因此它已定义，我们只使用该属性，所以它只是读取操作， 所以。
对渲染的简单理解是，当页面更新时，模板中执行了哪些操作以及操作的目标对象和键。
如果修改了多个属性，则将多次触发此方法。
让我们看一下示例
我们单击按钮修改名称，该名称只会触发该方法一次。
让我们在下面的不同情况下进行详细分析
单个组件初始化
单个组件更新
卸下
父亲和儿子的成分初始化
父亲组件更新数据，此数据未传递给子组件
父亲组件更新数据，此数据传递给子女组件
副校长更新数据
父亲和儿子组成部分卸载
生命周期功能的旧版本可用
每个生命周期功能的旧版本如下运行
构造函数初始化阶段仅运行一次，以获取初始数据。例如。
ComponentWillMount在初始化阶段运行，仅运行一次。
ComponentDidmount在初始化阶段运行，仅运行一次。您可以在此处获取元素。
异步请求建议是在此功能中编写的，例如请求背景获取数据。
showscomponentupdate（NextProps，NextState）在初始化阶段不运行，当组件更新时运行。
如果必须显示此方法，则有必要返回或表明需要进行更新，以表明不需要更新，并且通常用于优化性能。
接收两个参数，即最新和最新的参数，我们可以使用当前或当前或比较来使用此点，以确定渲染或不进行性能优化的渲染。
componentwillupdate（NextProps，NextState）在初始化阶段没有运行，并且在将更新组件时运行。
接收两个参数，即最新和最新的参数，我们可以使用当前或当前或比较来使用此点进行一些特殊的逻辑处理。
ComponentDidupDate（PrevProps，Prevstate）在初始化阶段不运行，当组件更新时运行。
接收两个参数，这是以前的和上一的。
ComponentWillReceiveProps（NextProps）在初始化阶段没有运行，在更新组件之前运行。
接收参数表示最新。
由组件本身的更改引起的组件更新不会触发该方法。
当父组件传递给组件时，它将传递给组件，并且在更改时不会运行。
但是请注意，如果父组件使组件重新租赁，即使没有更改，此方法也会被调用。如果您只想处理更改，请确保将当前值与更改值进行比较。
在这里，您可以使用并进行比较来处理一些特殊的逻辑。
渲染方法。这里主要是编写页面元素和样式。
当组件被卸载时，componentWillunMount会运行，并且可以在此处清除某些副作用，例如监视函数。timer等。
ComponentDidCatch（错误，errorInfo）通过子模块中的错误调用。
接收和两个参数表示丢弃的错误。在键的情况下，它包含有关组件引起的错误的堆栈信息。
在这里，它可用于将错误上传到服务器以获取错误日志。
让我们在下面的不同情况下进行详细分析
单个组件初始化
单个组件更新状态
卸下
父亲和儿子的成分初始化
无论父母是否将道具传递到子组件的生命周期功能，都按照上述方式运行。
父亲组件更新状态
无论父母组件是否传递到子组件生命周期函数，它都在运行。换句话说，将触发父组件。
子 - 组件更新状态
父亲和儿子组成部分卸载
新版本主要是由于新版本中的大量调整。新版本的生命周期功能可用
因为这三个生命周期经常被误解和虐待，所以它们被称为不安全（不是指安全性，而是指出这些生命周期的代码可能会在未来版本的React版本中存在缺陷，这可能是可能的。影响未来异步渲染的生命循环）。
React 16.3：引入别名，不安全生命周期的和谐，以及（可以在此版本中使用旧的生命周期名称和新的别名）
React 16.3版本：用于发现警告。（旧的生命周期名称和新的别名可以在此版本中使用，但旧名称将记录DEV模式警告）
React 17.0版本：启动一种新的渲染方法-Async渲染，提出一个可以中断的生命周期，以及中断三个生命周期的阶段，以及。角色）
总体而言，新版本的生命周期功能是删除三个不安全的功能
添加了三个新的生命周期功能
每个生命周期功能的新版本如下
下面我们专注于分析这三种新方法
当组件初始化和组件更新时，将调用静态getDerivedateFromprops（Props，state）。
接收和两个参数，在这里您可以通过返回对象来更新组件本身，或返回以表示接收没有更改，也不需要更新。
请注意，此方法是一种静态方法，因此生命周期挂钩不在内部，因此无法使用获得组件实例的属性/方法。
生命周期挂钩的作用：父组件映射到子组件，因此，将不再通过获得属性值来获得组件的内部，并且均匀地获得了采集。映射等效于复制父部分，作为子部门自己的状态。注意：通过更新自己的状态来更新子组件时，它不会更改父部件
更新组件时，getSnapshotbeforeupdate（PrevProps，prevstate）被调用。重新介绍稍后，更新和之前。
这个生命周期的钩子必须具有返回值，并且返回值将用作第三个参数。您必须彼此使用它，否则将报告错误。
这是最新的，可以将其与函数的参数进行比较并处理过逻辑。
生命周期钩的作用：它使您可以在组件更新之前捕获一些信息（例如滚动位置）。
静态GetDerivedStateFromError（错误）将在后代组件中丢弃错误后调用。它将错误作为参数并返回值以更新的值。
有人可能会问，这种方法有什么区别？
在渲染前呼叫，当我们遇到子组件错误时，我们可以渲染以供以后使用，通常用作错误边界。它仅在渲染后才调用，可用于输出错误消息或上传一些错误报告。
例如，我们可以定义一个错误边界组件，该组件在子组件是错误的情况下显示错误提示符，以免渲染页面。
让我们在下面的不同情况下进行详细分析
单个组件初始化
单个组件更新状态
卸下
父亲和儿子的成分初始化
父亲组件更新状态
无论父母组件是否传递到子组件生命周期函数，它都在运行。换句话说，将触发父组件。
子 - 组件更新状态
父亲和儿子组成部分卸载
以上是引入的，即新版本的react删除，三种方法。
在应用程序中导致白屏的无数数据应用程序中，许多开发人员将数据请求的代码放入页面中，因为他们在第一个渲染过程中没有获得由异步数据引起的白屏幕。异步请求的时间很早。
但是实际上，在执行后，第一个渲染已经开始，因此，如果在执行过程中未获得异步数据，则页面在第一次呈现页面时仍处于无异步数据的状态。，第一次渲染时，组件将始终处于没有异步数据的状态下，因此无论您发送数据请求的何处，都无法直接解决此问题。对早期发送的数据请求进行预示，该官员还鼓励数据代码请求部分中的部分而不是。
事件订阅的另一个常见案例是在中国订阅该事件并取消中国的相应事件订阅。但实际上，不能保证在被称为后，肯定会称呼相同的组成部分。
当前版本（例如服务器渲染）的一个示例将不会在服务器上调用，因此订阅事件将直接导致服务器的内存泄漏。
另一方面，将来打开异步渲染模式后，被称为组件的渲染可能会被其他公司中断，导致不称为。被调用后，肯定会稍后调用，并根据特定代码在组件中删除事件订阅。
新版本替换方案可以迁移现有代码。
更新由Prop确定的语句以及在旧版本的React中的特定条件下的处理。如果组件本身的某个状态与其道具密切相关，则需要确定两个教授在相应状态之前和之后是否相同。，导致组件状态的状态变得不可预测，另一方面，它也将增加组件的重新绘制数量。
也有许多类似的业务需求。例如，可以水平滑动的列表显然与列表本身有联系，但是在许多情况下，业务需求会要求从外部跳到列表。一个值直接定位到选项卡。
一个简单的例子如下：
乍一看，这两者似乎没有根本差异，但这是一个变化，我相信React团队可以深入了解软件工程。编写更好的维护JavaScript代码。要解释这一点，请看一下，让我们看一下一个段落：
一般而言，在中间，我们通常会做以下两件事。一个是根据道具更新状态，另一个是触发一些回调，例如动画或页面跳跃。在旧版本的react，我们需要做这两件事。在新版本中，官方RE在新版本中- 将其余部分分配并触发恢复到中间，使组件的总体更新逻辑更加清晰。此外，禁止组件访问this.props.props。开发人员使用这种生命周期功能，是基于当前的道具来更新组件状态。不仅是执行使组件状态更加不可预测的其他事情。
替换方案的新版本可以分别基于更新或回调来重写现有代码。
流程更改带来的副作用和类似的副作用，许多开发人员还将根据道具的更改触发一些回调。此处编写的回调函数可能被称为多次，这显然是不可取的。
同样，也没有这样的问题。它只会在更新中一次调用一次，因此最初写入的恢复可以解决此问题。
在组件更新之前调用组件更新之前，请阅读DOM元素状态，读取当前DOM元素的状态并进行相应处理。提交阶段，这意味着在渲染阶段中读取的DOM元素状态并不总是与提交阶段相同，这使其在使用中读取的Chinathe dom元素状态中读取不准确。
不同的是，它将在最终渲染之后调用（但目前尚未真正更新真实的DOM），也就是说，中间读取的DOM元素的状态绝对与以前相同。
返回一个值。此值将传递到第三个参数，然后我们可以更新组件的状态，而不是直接更新组件的状态。
官员提供的一个示例如下：
替换方案的新版本重新定位了现有的恢复功能。
如果在触发某些回调函数时需要DOM元素的状态，则比较或计算的过程迁移以返回计算值。然后通过第三个参数获取值，然后统一触发恢复或更新状态。
我们都引入了和谐的生命周期函数。让我们总结它们的相同和不同的要点。
感谢朋友们观看了病人，本文是作者的个人研究笔记。如果本文对您有所帮助，请同样喜欢??，您的支持是作者不断更新的动机！
原始：https：//juejin.cn/post/7101531970194112543