React生命周期解析

组件的生命周期
React生命周期图
defaultProps
React生命周期的回调函数总结成表格如下：
组件生命周期的执行顺序
- 1. Mounting：
- 2. Updating：
- 3. Unmounting：
通过Counter计数器的小案例 - 了解生命周期函数

组件的生命周期

生命周期的概念：每个组件的实例，从创建、到运行、直到销毁，在这个过程中，会出发一些列事件，这些事件就叫做组件的生命周期函数；
React组件生命周期分为三部分：

组件创建阶段：特点：一辈子只执行一次

componentWillMount:
render：
componentDidMount:

组件运行阶段：按需，根据 props 属性或 state 状态的改变，有选择性的执行 0 到多次

componentWillReceiveProps:
shouldComponentUpdate:
componentWillUpdate:
render:
componentDidUpdate:

组件销毁阶段：一辈子只执行一次

componentWillUnmount:

React生命周期图

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序

1. Mounting：

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

2. Updating：

componentWillReceiveProps(nextProps)
-shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

3. Unmounting：

componentWillUnmount()

通过Counter计数器的小案例 - 了解生命周期函数

给 props 属性提供默认值和进行类型校验，需要先运行cnpm i prop-types --save
给组件的 props 提供默认值

 // 为组件提供 默认的 props 属性值static defaultProps = {initcount: 0 // 默认值为0   如果用户没有传递 ，则 默认就是0； 如果用户传递了，则 以用户传递的为准
}

给组件的 props 进行类型校验

 // 3. 进行 props 属性的类型校验,   static propTypes = {} 是固定写法static propTypes = {initcount: PropTypes.number.isRequired // 规定 外界在传递 initcount 的时候，必须是 number 值类型，否则 ，会在终端报警告// isRequired 表示 这个 props 属性值 是必须要传递的
}

React生命周期解析相关推荐

react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
Android复习10【Service与Thread的区别、Service的生命周期、Service生命周期解析（相关方法详解、启动方式的不同、绑定）、音乐播放器+服务】
音乐播放器Android代码下载:https://wws.lanzous.com/ifqzihaxvij 目录 Service与Thread的区别 Service的生命周期 Service生命周 ...
深入react技术栈(5):React生命周期
我是歌谣放弃很容易但是坚持一定很酷微信搜一搜前端小歌谣 React生命周期挂载和卸载过程组件得挂载组件得卸载数据更新过程整体流程文章参考深入学习React技术栈
react学习(9)----react生命周期
react生命周期1.1.constructor() constructor()中完成了React数据的初始化,它接受两个参数 :props和context,当想在函数内部使用这两个参数时 ,需使用s ...
你不可不知道的React生命周期
点小蓝字加关注! 作者:kim 来源:原创写在前面咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数初始化阶段 getDefaultProps() 设置组件默认的 ...

React生命周期解析

React生命周期解析

组件的生命周期

React生命周期图

defaultProps

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序

1. Mounting：

2. Updating：

3. Unmounting：

通过Counter计数器的小案例 - 了解生命周期函数

React生命周期解析相关推荐

最新文章

热门文章