React(0.13) 利用componentDidMount 方法设置一个定时器

最新推荐文章于 2023-02-27 16:26:45 发布
最新推荐文章于 2023-02-27 16:26:45 发布
阅读量355 收藏
点赞数
文章标签： javascript ViewUI 
<html>
    <head>
        <title>hello world React.js</title>
        <script src="build_0.13/react.min.js"></script>
        <script src="build_0.13/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="e"></div>
        <script type="text/jsx">
            var Hello = React.createClass({
                    getInitialState:function(){
                        return {opacity:1.0};
                    },
                    componentDidMount:function(){
                        this.timer = setInterval(function(){
                            var opacity = this.state.opacity;
                            opacity -= 0.1;
                            if(opacity < 0.1){
                                opacity = 1.0
                            }
                            
                            this.setState({
                                opacity:opacity
                            });
                        }.bind(this), 100);
                    },
                    render:function(){
                        return (
                            <div style={{opacity:this.state.opacity}}>
                                hello {this.props.name}
                            </div>
                        );
                    }
                });
            
            //添加组件到e中
            React.render(
                <Hello name="world" />,
                document.getElementById("e")
            );
        </script>
    </body>
</html>

 

 

组件的生命周期

组件的生命周期分成三个状态：

  • Mounting：已插入真实 DOM

  • Updating：正在被重新渲染

  • Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

weixin_34209406
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js&React之定时器的实验和思考
Nathan_Qian的博客
01-16 390
2
react next服务端渲染（数据获取以及componentDidMount中的定时器问题）
yuanqi3131的博客
11-19 1455
一、前言 服务端渲染理论知识暂且不论，好处是利于首屏加载，以及SEO，具体详情可以去百度一下，因为在公司做了一个react项目，主要用于一个页面的展示功能，正好也使用一下服务端渲染，学习一下，vue用nuxt.js，react用next.js，琢磨了一段时间，用以记录，废话不多说，开始 二、前期准备 我们可以按照next.js官网一步步创建，这里使用create-next-app脚手架， 1）全局...
React 生命周期
a466783352的博客
02-22 143
componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJ...
react的几个生命周期
Youaremybigfool的博客
03-21 563
componentWillmount 组件挂载前 可以获取this数据，不能获取dom 修改数据 可以知己而引起页面改变 修改数据 不会触发运行中的生命周期 这个生命周期没什么用 跟不要做网络请求 componentDidMount 挂在结束 有dom 有数据 可以做网络请求 做初始化操做 数据修改不能直接引起页面改变 需要通过setState 数据修改会触发生命周期 sh...
React18的componentDidMount重复执行两次
m0_56698268的博客
02-27 760
React18的componentDidMount重复执行两次
React项目动态设置title标题的方法示例
10-17
主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用React手写一个对话框或模态框的方法示例
12-08
打算用React写对话框已经很长一段时间，现在是时候兑现承诺了。实际上，写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后...一个新的div会出现在body内部：
利用yarn实现一个webpack+react种子
12-23
我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令： yarn init yarn 如果没有安装，全程用 npm代替也没问题。 项目会初始化 package.json ,然后填写一些基本信息即可。 接下来我们开始安装依赖项，...
react 生命周期
zep
09-22 3009
1.组件从创建到死亡它会经历一些特定的阶段。 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 一、react生命周期（旧的） 生命周期的三个阶段（旧） 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 常用 一.
react中settimeout_React 中如何添加 setTimeout？
weixin_42613501的博客
12-23 236
谢谢邀请！写法很简单，就是在componentDidMount设置setTimeout，然后在componentWillUnmount取消，防止内存泄漏。下面是一般的写法：首先如果不是es6 class的写法，你可以用如下TimerMixin的写法，当然手动清除也是可以的，不过用的多的话Mixin个人觉得好点：var TimerMixin = require('react-timer-mixin'...
带你摸透react的生命周期（react生命周期详解，从创建到销毁的全过程）
weixin_45745641的博客
03-14 3138
文章目录前言react生命周期的四个阶段案例说明总结初始化更新销毁 前言 生命周期其实就是从创建到销毁的整个过程，我们发现很多框架都涉及到生命周期，为什么这些框架需要设计生命周期呢，是因为我们需要了解我们代码的执行过程。以及它们的执行顺序是怎样的，同时在不同的生命周期阶段会暴露不同的构造函数，而在不同的构造函数中我们可以做很多不同的功能。在React中一个由extends Component创建的类组件才会拥有生命周期 react生命周期的四个阶段 组件初始化阶段： getInitialState：初始化
「React 基础」组件生命周期函数componentDidMount()介绍
前端达人
02-04 1万+
大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：在组件加载完成， render之后进行调用，只会执行一次。番...
react踩坑 - 1, componentDidMount使用
weixin_34125592的博客
03-11 2371
setTimeout、setTinterval、异步请求等等异步操作一定要在componentDidMount 这个方法里面取消到所有的操作。 如果不取消所有操作，可能会发生找不到 setState的问题 转载于:https://www.cnblogs.com/hellolol/p/10509610.html...
componentDidMount 用法
秋霜梦红尘的博客
05-31 4267
componentDidMount 用法 import React, { Component } from 'react'; // 封装组件 class Hellow extends React.Component{ constructor(props){ super(props); // 设置初始透明度为1 this.state = {opacity:1.0} } // 组件渲染后调用 componentDidMount(){
react（23）——setInterval方法，react的componentDidMount生命周期方法
木子 旭的博客
02-03 443
1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Life extends React.Component { state = { opacity: 1 }; death = () => { ReactDOM.unmountComponentAtN
React生命周期详解
热门推荐
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
组件化开发-05-生命周期——componentDidUpdate-更新&componentDidMount-载入-须使用setState方法修改状态值&componentWillUnmount-卸载
weixin_44867717的博客
02-01 3344
react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改，必须使用setState方法 & componentWillUnmount-组件卸载 组件的生命周期 图解 componentDidMount 完成组件挂载后触发，类似于Vue中mounted 一般用于调用后台接口获取数据并更新state中的数据 组件内部状态的修改必须使用setState方法 componentWillUnmount
react生命周期钩子componentDidMount()
少油少盐不要辣
12-23 2603
componentDidMount() componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。 这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅 若组件不会再次插入到DOM树中，则该生命周期函数只会调...
react中，componentDidMount中，如何调用state?
最新发布
08-17
例如，假设我们的组件有一个名为`count`的状态，我们可以在`componentDidMount`方法中调用和更新它： ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值