React组件的生命周期

react组件的生命周期

文章目录

react组件的生命周期
- 总览
- 挂载时
- 更新时
- 卸载时
- 被移除的生命周期

总览

React的生命周期大体可以分为三个部分，一，挂载阶段；二更新阶段三，卸载阶段

挂载时

constructor：接收两个参数props，context；注意：使用construct时必须把props作为参数传给super，不然this指向会发生错误。
getDerivedStateFromProps(nextProps，state)：
1. 返回值：返回一个对象来更新state，如果时null则不更新；
2. 参数：第一个是最新的props，第二个是之前的state；
3. getDerivedStateFromProps是一个静态函数，也就是在getDerivedStateFromProps无法访问到this，而应该用nextProps和state来进行判断。
4. 是react16.4版本的更新。
5. ```
static getDerivedStateFromProps(nextProps, prevState) {const {type} = nextProps;// 当传入的type发生变化的时候，更新stateif (type !== prevState.type) {return {type,};}// 否则，对于state不进行任何操作return null;
}
```
render( ) ：在挂载和更新时都会使用到render函数。
componentDidMounted ( )：可以在这里获取dom元素操作页面和发送AJAX请求。可以加上async。里面有setState函数时不会再进入该生命周期

更新时

state或者props发生改变时：

getDerivedStateFromProps(nextProps，state)
shouldComponentUpdate（nextProps，nextState）：
1. 作用：主要用于性能优化，唯一控制组件重新渲染的生命周期；可以通过return false来阻止组件的更新，return true继续进入生命周期中。
2. 使用：nextProps和nextState可以获得最新的props和state，而this.props和this.state可以获得当前的props和state，可以通过比较这二者决定是否相同，然后来决定是否跳过。
3. 代码：
```
shouldComponentUpdate(nextProps, nextState) {if (this.props.color !== nextProps.color) {   //判断color是否改变return true;}if (this.state.count !== nextState.count) {   //判断count是否改变return true;}return false;    //如果两个都不改变，则不重新渲染}
```
render

getSnapshotBeforeUpdate：

作用：在方法在最近一次渲染输出（提交到 DOM 节点）之前调用，我们可以访问更新前的 props 和 state。
注意：getSnapshotBeforeUpdate() 方法需要与 componentDidUpdate() 方法一起使用，否则会出现错误。

代码：

class Header extends React.Component {constructor(props) {super(props);this.state = {favoritesite: "runoob"};}componentDidMount() {setTimeout(() => {this.setState({favoritesite: "google"})}, 1000)}getSnapshotBeforeUpdate(prevProps, prevState) {document.getElementById("div1").innerHTML ="在更新前喜欢的网站是：" + prevState.favoritesite;}componentDidUpdate() {document.getElementById("div2").innerHTML ="更新后喜欢的网站是：" + this.state.favoritesite;}render() {return (<div><h1>我喜欢的网站是 {this.state.favoritesite}</h1><div id="div1"></div><div id="div2"></div></div>);}
}ReactDOM.render(<Header />, document.getElementById('root'));

componentDidUpdate：注意：每当setState改变数据时都会重新进入该生命周期，所以不要在这里面写setState函数，不然会发生死循环。

forceUpdate时

不会经过shouldComponentUpdate阶段

卸载时

componentWillUnmount：可以在此清除定时器，鼠标移动事件等。

被移除的生命周期

componentWillMount ——>UNSAFE_componentWillMount
componentWillReceiveProps ——>UNSAFE_componentWillReceiveProps
componentWillUpdate——>UNSAFE_componentWillUpdate

移除并不代表不能使用，实际上在生命周期前面添加上**UNSAFE_**即可。

React组件的生命周期相关推荐

React 初探 [五] React 组件的生命周期
说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件 ...
React 组件的生命周期
目录前言一.React 实例的生命周期及其与 Hooks 的映射 1.旧的生命周期图 2.新的生命周期图 3.新旧生命周期及其与 Hooks 的映射表二.部分生命周期详解 1.getDerive ...
React 组件的生命周期详解
2019独角兽企业重金招聘Python工程师标准>>> 概念:在组建的创建.到加载到页面上运行以及组件被销毁的过程中,总是伴随的各种各样的事件,这些在组件特定时期,出触发的事件就叫做 ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
native react 更新机制_React Native - 组件的生命周期详解（附：各阶段调用的方法）...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
React 深入系列４：组件的生命周期
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...
03 为什么 React 16 要更改组件的生命周期？（下）
通过对上一个课时的学习,你已经对 React 15 的生命周期有了系统的掌握和理解.本课时,我将在此基础上,对 React 16 以来的生命周期进行剖析.在理解"是什么"的基础上, ...

React组件的生命周期

react组件的生命周期

文章目录

总览

挂载时

更新时

卸载时

被移除的生命周期

React组件的生命周期相关推荐

最新文章

热门文章