javascript、react——setInterval方法，react的componentDidMount生命週期方法

阿新 • • 發佈：2021-02-13

技術標籤：# javascript # react react javascript

1.程式碼

  <body>
    <div id="test"></div>

    <script type="text/babel">
      "use strict";

      class Life extends React.Component {
        state = { opacity: 1 };

        death = () => {
          clearInterval 
(this.timer);
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };

        componentDidMount() {
          this.timer = setInterval(() => {
            let { opacity } = this.state;
            opacity -= 0.1;
            if (opacity <= 0) opacity = 1 
;
            this.setState({ opacity });
          }, 200);
        }

        render() {
          console.log("render");
          return (
            <div>
              <h2 style={{ opacity: this.state.opacity }}>欄位</h2>
              <button onClick={this.death}> 
解除安裝該元件</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Life />, document.getElementById("test"));
    </script>
  </body>

2.程式碼講解

serInterval方法有兩個引數，第一個引數是一個方法，第二個引數是一個毫秒值。serInterval方法的作用是重複執行第一個引數方法，間隔第二個引數的毫秒時間。
componentDidMount方法是當render執行後，自動執行的一個生命週期方法
serInterval使用後需要記得清除它，clearInterval(this.timer);該方法用於清除定時器，引數為要清除的目標定時器

3.執行結果

在這裡插入圖片描述

javascript、react——setInterval方法，react的componentDidMount生命週期方法

技術標籤：# javascript# reactreactjavascript 1.程式碼 <body> <div id="test"></div>

為物件設計作用域，設定延遲載入，設定生命週期方法(瞭解)

1 package com.cy.pj.common.cache; 2 @Component 3 @Scope(\"singleton\") 4 @Lazy 5 public class DefaultCache {

JavaScript定時器setInterval()只執行一次解決方法

為了說明問題，程式碼很短 <script> var test = function(){ console.log(\'a\') } timer1 = setInterval(test(), 1000)

React生命週期方法（我常用的）

技術標籤：React constructor() 初始化state建立ref import React, { Component } from \'react\'; class demo extends Component {

react——新版本新增的生命週期函式getDerivedStateFromProps

技術標籤：# reactreact 1.程式碼 static getDerivedStateFromProps(props,state){ console.log("getDerivedStateFromProps",props,state)

JavaWeb13.4【Tomcat&Servlet：Servlet中的生命週期方法】

1 <?xml version=\"1.0\" encoding=\"UTF-8\"?> 2 <web-app xmlns=\"http://xmlns.jcp.org/xml/ns/javaee\"

JavaWeb19.2【Filter&Listener：過濾器Filter的執行流程和生命週期方法】

1 package com.haifei.web.filter; 2 3 import javax.servlet.*; 4 import javax.servlet.annotation.WebFilter;

SAP UI5 檢視控制器 View Controller 的生命週期方法 - Lifecycle methods

SAPUI5 View Controller lifecycle methods Create an Application Project for SAPUI5 開啟 Eclipse 並轉到選單選項，檔案 -> 新建 -> 其他...。在 New 視窗中，開啟節點 SAPUI5 Application Development 並