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

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--用于构建用户界面的JavaScript库入门教程

    React是Facebook开发并维护的一个用于构建用户界面的JavaScript库,其核心特点是采用声明式编程方式,让开发者能够高效地构建各种交互式界面。React虽然最初不是作为一个完整的框架发布的,但其生态系统中包含了许多...

    千锋2022版React全家桶教程_react零基础入门到项目实战完整版(资料)

    React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开发的。React 的主要特点是虚拟 DOM,能快速地更新和渲染组件。 二、React 的特性 1. virtual DOM:React 通过虚拟 DOM 来优化渲染速度。 2. 组件化...

    react-一个受Reactjs启发的极简主义组件库

    React.js 是一个由Facebook开发并维护的开源JavaScript库,它用于构建用户界面,特别是单页应用程序(SPA)。React以其声明式编程风格、高效的虚拟DOM和组件化架构而闻名,极大地提高了开发效率和应用性能。 标题...

    ES6的pdf,对于React的学习有帮助

    React框架本身大量使用了ES6的新特性,比如类组件的生命周期方法、函数组件中的钩子(Hooks)、组件的默认参数等。掌握ES6的知识点能够帮助开发者在使用React进行项目开发时,更加游刃有余。 此外,由于ES6的标准是...

    react-final-task

    然而,当涉及到异步操作时,如API调用或定时器,React的原生生命周期方法并不总是能提供最佳的解决方案。这可能导致状态更新的混乱,尤其是在多个并发请求的情况下。 "react-final-task" 提供了一种结构化的方法来...

    React-and-TypeScript

    2. **类型定义**: 使用DefinitelyTyped或类型声明文件(`.d.ts`)来补充第三方库的类型信息。 3. **代码规范**: 遵守ESLint和Prettier的代码风格规则,保持代码一致性。 4. **错误处理**: 利用TypeScript的错误检查...

    react-ameliorate:具有继承性的更好的React组件,改进的状态机,解析道具等。

    React是JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。它以其高效的虚拟DOM和声明性编程风格而闻名。`react-ameliorate`是一个致力于优化React开发体验的项目,尤其是在组件化、状态管理和属性解析等...

    常用面试题及答案.pdf

    - **未声明的变量** 指的是完全没有声明过的变量,在JavaScript中尝试访问这样的变量会抛出 `ReferenceError` 异常。 理解这些区别有助于避免常见的编程错误。 ### 5. 闭包 闭包是一个函数及其相关的引用环境组合...

    tailwindcss_aplinejs:Naveen Chow的任务。 使用Tailwind-CSS开发前端视图块,并使它们与AlpineJSReact

    - AlpineJS是一个轻量级的JavaScript库,类似于Vue.js或React,但体积更小,旨在降低前端开发的复杂性。它提供了声明式数据绑定、指令系统和组件化的能力。 - AlpineJS的API简洁明了,通过`x-data`、`x-bind`、`x-...

    mstdon-client-for-electron:使用Electron的Mastodon客户端应用程序

    2. **React应用开发** - React的应用开发涉及组件化设计、虚拟DOM、状态管理(如Redux或Context API)以及生命周期方法等。 3. **Webpack配置** - Webpack的配置包括入口、输出、加载器(loaders)、插件(plugins)...

Global site tag (gtag.js) - Google Analytics