react 组件的生命周期

componentWillMount:组件出现前,dom还没有渲染到html文档里面;

componentDidMount:件渲染完成 已经出现在dom文档里;

componentWillUnmount:说该事件在组件即将被移除dom时会触发;

React 生命周期 demo

首先引入相关的js

<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>

<script type="text/jsx">

        var Timer=React.createClass({
            getInitialState:function(){
                return {secondsElapsed:0}
            },
            tick:function(){
                this.setState({secondsElapsed:this.state.secondsElapsed+1});
            },

            componentDidMount:function(){
                this.interval=setInterval(this.tick,1000);
            },
            componentWillUnmount:function(){
                clearInterval(this.interval);
            },
            render:function(){
                return (<div>timer:{this.state.secondsElapsed}</div>)
            }
        });

        React.render(<Timer />,document.body)

    </script>
时间: 2024-10-06 16:11:33

react 组件的生命周期的相关文章

2. React组件的生命周期

2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中React组件为我们提供了很多钩子,以便更加方便精细的控制程序. 钩子包括:componentWillMount/componentDidMount,同时在调用setState时候会触发:componentWillReceiveProps/shouldComponentUpdate/ComponentW

React组件的生命周期

整个组件,从创建组件类开始,到渲染,到消亡的过程,就是组件的生命周期. 组件的生命周期可以分为三个阶段: 挂载阶段 更新阶段 卸载阶段 挂载阶段 在这个过程中,会触发以下几个事件 getDefaultProps,设置默认属性 getInitialState,设置初始状态 componentWillMount 即将挂载 render 渲染,就是挂载 componentDidMount 挂载完成 <!DOCTYPE html> <html> <head> <meta

(三)表单数据的搜集和react组件的生命周期

四:表单数据的搜集 (1)         问题: 在react应用中, 如何收集表单输入数据 (2)         包含表单的组件分类 受控组件: 表单项输入数据能自动收集成状态 非受控组件: 需要时才手动读取表单输入框中的数据 /* 需求: 自定义包含表单的组件 1. 界面如下所示 2. 输入用户名密码后, 点击登陆提示输入信息 3. 不提交表单 */ class LoginForm extends React.Component{ //搜集表单数据 constructor(props){

React 组件的生命周期API和事件处理

一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultProps,而后续实例创建时不会调用这个方法. 实例被创建时,依次被调用的API有: getDefaultProps: 实例第一次被创建时才调用,对于组件类来说,它只调用一次. 这个方法返回的对象可为实例设置默认的props值. getInitialState: 对于每个实例来说,这个方法只调用一次.

react组件的生命周期机制

组件更新 (组件状态改变)新一轮rendershouldComponentUpdate(newPros,newState)componentWillUpdatecomponentDidUpdate 组件注册getDefaultPropsgetInitialStatecomponentWillMountrender()componentDidMount 组件消亡ReactDOM.unmountComponentAtNode(destination) 去调用组件消亡生命周期函数componentWi

React组件的生命周期各环节运作流程

'use strict'; React.createClass({ //1.创建阶段 getDefaultProps:function(){ //在创建类的时候被调用 console.log('getDefaultProps'); return {}; }, //2.实例化阶段 getInitailState:function(){ //获取this.state的默认值 console.log('getInitailState'); return {}; }, componentWillMoun

React:组件的生命周期

在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 当组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时

Vue与React的异同 -生命周期

vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 beforeDestroyed 销毁  destoryed methods --方法 -----------------------------------华丽的分割线------------------------- 一个React组件的生命周期分为三个部分:挂载期(Mounting).存在更新期(Up

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React