网站群建设管理规定,徐州市云龙区建设局网站,网页qq邮箱怎么发文件,泰安seo服务新生命周期https://blog.csdn.net/kkkys_kkk/article/details/135156102?spm1001.2014.3001.5501
目录 什么是生命周期
react中的生命周期
旧生命周期
生命周期图示
常用的生命周期钩子函数
初始化阶段
挂载阶段
在严格模式下挂载阶段的生命周期函数会执行两次原因
更…新生命周期https://blog.csdn.net/kkkys_kkk/article/details/135156102?spm1001.2014.3001.5501
目录 什么是生命周期
react中的生命周期
旧生命周期
生命周期图示
常用的生命周期钩子函数
初始化阶段
挂载阶段
在严格模式下挂载阶段的生命周期函数会执行两次原因
更新阶段
componentWillPrceiveProps
shouldComponentUpdate
componentWillUpdate
render同上
componentDidUpdate
销毁阶段
componentWillUnmount() 什么是生命周期
生命周期Lifecycle指的是软件或程序在运行过程中经历的不同阶段和状态变化。在编程领域中特别是在面向对象编程中生命周期是指对象从创建到销毁的整个过程中所经历的状态变化。
生命周期通常由一系列的方法或事件组成用于在对象的不同阶段执行相应的操作或处理。每个阶段可以对应于不同的状态例如初始化、运行、暂停、恢复以及销毁等。
在前端Web开发中生命周期常常用于描述JavaScript框架或库中的组件或页面的状态变化。例如在React框架中组件有挂载、更新和卸载等不同的生命周期阶段每个阶段都有相应的生命周期方法如componentDidMount、componentDidUpdate和componentWillUnmount等。
通过生命周期方法开发者可以在对象不同状态下执行相应的操作比如初始化数据、处理用户输入、发送网络请求、更新UI等。这些方法允许开发者在适当的时候执行逻辑并且处理应用程序的不同方面。
react中的生命周期
在React中组件的生命周期指的是组件从创建、挂载、更新到销毁的整个过程中所经历的不同阶段和状态变化。通过控制这些生命周期方法的调用可以在不同的阶段执行逻辑操作如初始化数据、处理用户输入、发送网络请求、更新UI等。
React的组件生命周期可以分为以下三个阶段
1. Mounting挂载阶段组件被创建并添加到DOM中。 - constructor组件的构造函数在组件被创建时调用一般用于初始化状态和绑定事件。 - render渲染组件的UI结构。 - componentDidMount组件被挂载到DOM后调用可以执行副作用操作如发送网络请求、订阅事件等。
2. Updating更新阶段组件的状态或属性发生变化时重新渲染。 - componentDidUpdate组件更新后调用可以进行一些更新后的操作比如处理更新后的数据、重新渲染等。
3. Unmounting卸载阶段组件从DOM中移除。 - componentWillUnmount组件即将被卸载和销毁时调用可以执行一些清理操作比如取消订阅、清除定时器等。
在React 16.3版本之后还引入了新的生命周期方法包括 - static getDerivedStateFromProps: 在组件实例化或接收到新的props时调用返回一个新的state用于在props发生变化时更新state。 - getSnapshotBeforeUpdate: 在更新前获取DOM的快照用于在DOM更新后获取一些额外的信息。
需要注意的是在React 17版本中一些生命周期方法已经被标记为过时建议使用其他替代的方法来完成相应的操作。而且React Hooks的引入也改变了组件的开发方式提供了更简洁的方式操作组件的状态和生命周期。
旧生命周期
生命周期图示 常用的生命周期钩子函数 初始化阶段
constructor创建组件时最先执行
通过给 this.state 赋值对象来初始化内部的state为事件处理程序绑定this
如果不初始化 state 或不进行方法绑定则不需要为 React 组件实现构造函数 挂载阶段
挂载阶段会触发 componentWillMount、 render 和 componentDidMount componentWillMount数据可以获取到但是真实DOM没有获取到它相当于是Vue生命周期中 created beforeMount render每次组件渲染都会触发渲染视图注意不能调用setState
componentDidMount组件挂载完成DOM渲染后用于发送网络请求DOM操作 在严格模式下挂载阶段的生命周期函数会执行两次原因 官网的解释是 React 工作分为两个阶段渲染和提交阶段。渲染的过程可能会很慢提交会很快。为了避免浏览器的阻塞React 会把渲染工作分解为多个部分执行。这就导致了React 在提交之前会多次调用渲染阶段生命周期的方法或者在不提交的情况下调用它们。为的就是消除副作用。但在生产环境下不会产生此问题 更新阶段
props更新 componentWillPrceiveProps
接收新属性能够监听到当前组件身上的 props 变化 nextProps参数可以获取到最新的属性 shouldComponentUpdate
触发时机组件重新渲染前执行 根据 shoundComponentUpdate 的返回值来决定是否更新自身组件及其子组件。返回 true 更 新返回 false 不更新 此方法仅作为性能优化的方案 而存在不要企图依靠此方法来 “ 阻止 ” 渲染 最好使用 React 提供的内置组件 PureComponent 来自动判断是否调用 render 方法而不是使用 shoundComponentUpdate 方法进行手动判断 不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify() 这样做会影响性能 shoundComponentUpdate( nextProps , nextState )接收两个值 nextProps更新完成后的 props 值 nextState更新完成后的 state 值 componentWillUpdate
组件即将更新
作用 获取的是更新前的数据为组件的更新做准备工作生成新的VDOM
注意这个钩子函数中切记不要使用 this.setState,会造成死循环 render同上 componentDidUpdate 在组件更新完成 DOM渲染后触发 1. 发送网络请求 2. DOM 操 作 注意如果要 setState() 必须放 在一个if 条件中 state更新 同上 shouldComponentUpdate componentWillUpdaterendercomponentDidUpdate
销毁阶段
componentWillUnmount()
作用 在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理例如使定时器无效取消网络请求或清理在componentDidMount中创建的任何监听。主要是为了善后工作比如关闭定时器删除定义的对象 组件卸载方式
