`
_wyh
  • 浏览: 61358 次
社区版块
存档分类
最新评论

React js声明周期补充

阅读更多

关于组件的生命周期方法,需要特别注意每个方法的运行时间还有方法中需要填写的内容。

下为此前博客的补充:

 

初始化阶段:

  

     (1)render() :

           创建每个组件时, render()方法是必不可少的。如果该组件不需要渲染任何东西,也必须使render()返回 null或者false,此时当创建的组件应用到其它地方时,返回的是null。

           当组件的this.props和this.state改变时,render()方法被调用。所以该方法也属于运行时阶段方法。此外,绝对不能在render()方法中修改state的值,此时会造成render()方法调用的死循环,从而一直反复执行,占用着内存不释放。

 

      (2)getInitialState() :

            每个组件实例化时被调用,可以进行一些重要的运算,返回的值作为state的初始值,也就是返回值可以初始化组件的state。

 

      (3)getDefaultProps() : 

            与getInitialState()不同,每个组件只在第一次创建的时候调用一次,后面不管创建几个该组件实例,都不会再调用该方法。

            返回的值可以作为组件的props。但是这个props是该组件所有实例共享的。

 

       (4)componentWillMount() :

             初始化时,在render()之前调用一次,可以在里面修改state的值。

 

运行时阶段:

       

       (1)componentWillReceiveProps(object nextProps)

             组件接收到父组件新的props时调用。可以在这个方法中给state做更改。

             该方法不属于初始化阶段,组件初始化时并不会调用。所以在这里修改state之前,最好有一个state的初始值。

       

       (2)shouldComponentUpdate()

             当props和state改变时,在render()之前调用,如果某个时候,不想让render()执行来重新渲染组件,则让shouleComponentUpdate返回false即可。必须返回一个true或false。

 

       (3)componentWillUpdate()

             在shouldComponentUpdate()之后马上执行。但是不能在该方法中修改state,只能做一些准备工作。不需要返回值。

      

       

 

0
0
分享到:
评论

相关推荐

    react生命周期函数图解

    React中重要的部分就是生命周期函数。与其他框架不同,React的生命周期函数不同阶段支持不同的状态和属性变化,从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。

    React的声明周期

    React的声明周期是React组件的重要特性,它定义了组件在不同阶段的行为和执行的函数。在React 16.3版本之前,组件的生命周期被分为加载阶段、更新阶段和卸载阶段。 **加载阶段** 1. **constructor()**: 构造函数在...

    React组件的生命周期

    React组件的生命周期

    react.js、react-dom.js、babel.js文件包下载

    React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...

    react js共四个文件

    React.js 是一个流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它由Facebook开发并维护,强调组件化开发和虚拟DOM的概念。在这个压缩包中,包含的四个文件对于理解React工作原理和开发React...

    react下的react.min.js和react-dom.js

    开发者可以利用React创建可复用的组件,通过定义状态和属性来管理组件的生命周期和行为。 `react-dom.js`则是React与实际DOM(Document Object Model)交互的桥梁。它提供了将React组件渲染到浏览器DOM的方法,同时...

    React的三个js文件

    `react-dom.development.js`允许开发者在浏览器环境中使用React的生命周期方法、状态管理和事件处理等功能,并且在出现问题时提供清晰的错误提示,便于调试。 3. **react.development.js** 这是React库本身的核心...

    react.js完整安装包

    React.js 是一个流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它由Facebook开发并维护,以其组件化、虚拟DOM和声明性编程风格而闻名。在本压缩包中,你获得了React v15.3.2的源代码及相关示例...

    react开发相关js资源包大全,基本都有,免费下载

    这个压缩包文件包含了React开发中常用的一些JavaScript资源包,包括`propTypes.js`和`react.js`,这些都是React开发的核心组成部分。 首先,我们来详细了解下`propTypes`。`propTypes`是React的一个可选模块,它...

    react下载,包括react.development.js;babel.min.js;react-dom.development.js

    首先,Babel将使用JSX的React组件转换为JavaScript,然后React库负责组件的状态管理和生命周期管理,最后React DOM处理组件与浏览器DOM的交互,实现视图的更新。 在实际开发中,通常还会搭配其他工具和库,如...

    React中组件的生命周期 - 详解.png

    React中组件的生命周期 - 详解

    React所需的三个js文件3--babel.min.js.zip

    在React的应用开发中,有三个关键的JavaScript文件通常会被用到:`react.js`、`react-dom.js`和`babel.min.js`。在这个场景中,我们只提到了`babel.min.js`,它是React开发中的一个重要组成部分。 `babel.min.js`是...

    学习html、css、js、react js的笔记和demo.zip

    学习html、css、js、react js的笔记和demo学习html、css、js、react js的笔记和demo 学习html、css、js、react js的笔记和demo学习html、css、js、react js的笔记和demo 学习html、css、js、react js的笔记和demo...

    React生命周期方法的实时可视化工具.zip

    React是JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它以其组件化和虚拟DOM的概念而闻名,使得开发大型、复杂应用更加容易。在React应用中,每个组件都有其特定的生命周期,这些生命周期方法允许...

    react js基本文件.rar

    React.js 是一个流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它通过组件化的方式让开发更高效,可维护性更强。在你提到的"react js基本文件.rar"压缩包中,可能包含了React的核心文件,让...

    react入门学习文档

    React 是一个声明式、高效且灵活的用于构建用户界面的 JavaScript 库。它起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V...

    React小书(完整版)1

    这样的安排有助于确保读者在学习React.js的同时,也能够及时跟进JavaScript语言的最新发展。在每个学习阶段的尾声,作者都提供了实战分析,让读者能够通过具体的实践案例来巩固和应用所学知识。例如,通过实现一个...

    基于react flv.js

    基于react flv.js

    React 练习时使用的三个基本js文件

    `React.development.js`包含了React的生命周期方法、状态管理、props传递等特性,并且提供了对开发者友好的错误警告,帮助开发者找出潜在的问题。在生产环境中,为了提高性能,通常会使用压缩和优化过的`react....

Global site tag (gtag.js) - Google Analytics