React Native之组件(Component)生命周期学习笔记

简介: React Native之组件(Component)生命周期学习笔记

1、Component介绍

一般Component需要被其它类进行继承,Component和Android一样,也有生命周期

英文图片如下

20181016003009671.jpg2   具体说明

1)、挂载阶段

constructor() //构造函数,声明之前先调用super(props)

componentWillMount()//因为它发生在render()方法前,因此在该方法内同步设置状态不会引发重渲染

render()//组件加载,该方法必须要有,返回一个React元素,

componentDidMount()//组件加载完成后触发,实例化网络请,设置定时器,设置监听,设置状态会导致重渲染


2)、更新阶段:该阶段表示由状态或属性的改变导致组件的重渲染

componentWillReceiveProps(nextProps)://该方法会在加载好的组件在收到新的状态后调用,这里可以使用setState函数。

shouldComponentUpdate(nextProps, nextState):该方法用来告诉React,组件输出是否受到当前状态或属性的影响,默认情况下,每次状态改变都会导致重渲染,初次渲染不会调用该方法。

componentWillUpdate():该方法在收到新属性和状态渲染前调用,初次渲染不会调用该方法。

render():该方法是mount和update阶段都会使用到的方法,

componentDidUpdate(prevProps, prevState):更新发生后会立即调用该方法,初次渲染不会调用该方法。


3)、销毁阶段

componentWillUnmount():该方法会在组件被销毁前立即调用,实现一些清理工作,如清除定时器,取消网络请求或者是清理其他在componentDidMount()方法内创建的DOM元素。


3  总结:

一般建议componentWillMount,componentDidMount,componentWillReceiveProps方法修改state值

在componentDidMount中,实例化网络请,设置定时器,设置监听。


相关文章
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
116 0
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
380 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
前端开发 JavaScript 开发者
介绍一下React生命周期
介绍一下React生命周期
246 9
|
前端开发 JavaScript
React 组件的生命周期阶段详解
【8月更文挑战第30天】
208 7
|
前端开发 API UED
React组件生命周期详解
【9月更文挑战第4天】在React应用开发中,掌握组件生命周期对于管理状态和属性至关重要,并能有效提升应用性能。本文详细介绍了React组件生命周期的三个阶段:挂载、更新和卸载,并通过代码示例展示了如何避免状态更新导致的死循环及优化网络请求等问题,帮助开发者构建更高效、可维护的应用。
292 3
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
282 5
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
526 0
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
357 0
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
207 0