1. 程式人生 > >react 學習--元件的生命週期(三)銷燬階段

react 學習--元件的生命週期(三)銷燬階段

 var HelloWorld = React.createClass({
         render:function () {
             return (
                     <p>
                         Hello,{this.props.name?this.props.name:' World'}
                         <span ref="tip"></span>
                     </p>
             );
         },

     });
     var Test = React.createClass({
         getInitialState:function () {
             return {
                 "name":""
             };
         },
         handleChange:function () {
             if(this.refs.myInput.value=="#"){
                 ReactDOM.unmountComponentAtNode(document.getElementById("app"));
             }else{
                 this.setState({
                     "name":this.refs.myInput.value
                 });
             }
         },
         render:function () {
             return(
                     <div>
                         <HelloWorld name={this.state.name}/><br/>
                         <input ref="myInput" type="text" onChange={this.handleChange} />
                     </div>
             );
         },
         // 元件將要被銷燬時
         componentWillUnmount: function() {
             console.log("BOOOOOOOOOOOOOOOOOM!");
         },
     });
     ReactDOM.render(<Test />,document.getElementById("app"));

相關推薦

react 學習--元件生命週期銷燬階段

var HelloWorld = React.createClass({ render:function () { return ( <p>

Vue與React的異同—生命週期

React與Vue都有lifecycle生命週期的概念,表示每個元件例項在被建立之前都要經過一系列的初始化過程。比如設定資料監聽、編譯模板、掛載例項到檢視、在資料變化時更新檢視等。 Vue生命週期 所有的生命週期鉤子自動繫結 this 上下文到

React.js 時間元件 + 元件生命週期更新模擬

React是用於構建使用者介面的 JavaScript 庫,React 元件使用一個名為 render() 的方法, 接收資料作為輸入,輸出頁面中對應展示的內容。 React除了可以使用外部傳入的資料以外 (通過 this.props 訪問傳入資料), 元件還可以擁有其內部的狀態資料 (通過 this.

React-Native開發 React Native元件生命週期

1 前言 大家都知道React Native其實是由很多元件構成,開發RN介面的過程就是合理的組織各個元件的過程,在這其中需要不斷的拆分和優化元件。因此理解RN元件的生命週期很重要,這樣我們才能合理的在元件中進行我們的事務。 2 React Native元件生命週期 RN元件

vue 元件與通訊與vuex與computed與生命週期2

二:vuex 先看官方文件 Vuex 官方文件:https://vuex.vuejs.org/zh-cn/ vuex 是一個專為vue應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。 vuex 不同於lo

vue 元件與通訊與vuex與computed與生命週期1

一:元件 1:先看官方文件 什麼是元件 元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素,封裝可重用的程式碼。在較高層面上,元件是自定義元素,Vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用 is 特性進行

React 生命週期摘抄

/* 首先當元件第一次渲染的時候會執行哪些生命週期函式? constructor--->componentWillMount--->render--->componentDidMount constructor: 初始化

vue元件生命週期

vue元件的生命週期 Vue所有的生命週期鉤子自動繫結在this上下文到例項中,因此你可以訪問資料,對屬性和方法進行運算。這意味著你不能使用箭頭函式來定義一個生命週期方法。這是因為箭頭函式綁定了父上下文,因此this與你期待的Vue例項不同。 1、beforeCreate   在例項初始

Oracle學習系類篇

eat procedure body str 分組 錯誤 style mage 可見 1. 存儲過程 CREATE OR REPLACE PROCEDURE SP_NAME( PM_NAME [IN/OUT/IN OUT] PM_TYPE...)

小白學習之Code First

數據庫 change chang chan inf 模型 code test nbsp 上下文Context類中的base構造器的幾個方法重置(1、無參 2、database name 3 、 連接字符串) 無參:如果基類base方法中無參,code first將會以 :{

機器學習算法整理決策樹

outlook spa com width 選擇 clas .com img 衡量標準 決策樹的訓練與測試 如何切分特征(選擇節點) 衡量標準-熵 信息增益 決策樹構造實例 信息增益:表示特

Python學習過程筆記整理

font pytho def 駝峰 python學習 erl -s 函數參數 python 函數 -函數使用   -函數需要先定義,定義不會執行函數   -使用函數,俗稱調用 -定義函數   -格式:def 函數名稱(參數):,函數名稱不能用大駝峰,參數可以沒有 -調用函數

廖雪峰網站—學習python基礎知識

style 字符串 知識 code ron sar sof 轉換 () 一、判斷 1、條件判斷 age = 18 if age >= 18: print(‘your are is‘, age) print(‘adult‘) ag

29 Java學習之NIO Selector

Selector(選擇器)是Java NIO中能夠檢測一到多個NIO通道,並能夠知曉通道是否為諸如讀寫事件做好準備的元件。這樣,一個單獨的執行緒可以管理多個channel,從而管理多個網路連線。 一. 為什麼使用Selector? 僅用單個執行緒來處理多個Channels的好處是,只需要更少的執行緒來處理

《好好學習》讀書筆記第二章:掌握臨界知識的方法

目錄 心態準備 1.新舊知識建立聯絡 2.發掘新知識的通用性 3.花慢功夫死磕關鍵知識,打通知識網的要塞,融匯貫通 具體方法 1.反思 2.以教為學           3.

Go語言學習筆記-函式部分

函式部分 函式基本組成:關鍵字func、函式名、引數列表、返回值、函式體、返回語句 例子: func Add(int a, int b) (return int, err error){ ....函式體... } 如果相鄰引數型別相同,可以簡寫,eg: a,b int //a、b引數型別相同 函式

Git 學習之git 分支

別名 直觀 字符 正常 有關 rdquo automatic lease ive Git 分支 幾乎每一種版本控制系統都以某種形式支持分支。使用分支意味著你可以從開發主線上分離開來,然後在不影響主線的同時繼續工作。在很多版本控制系統中,這是個昂貴的過程,常常需要創建一個源

《機器學習實戰》筆記:樸素貝葉斯

4.1 基於貝葉斯決策理論的分類方法 樸素貝葉斯是貝葉斯決策理論的一部分,貝葉斯決策理論的的核心思想,即選擇具有最高概率的決策。若p1(x,y)和p2(x,y)分別代表資料點(x,y)屬於類別1,2的概率,則判斷新資料點(x,y)屬於哪一類別的規則是: 4.3 使用條件概率來分類

Servlet的生命週期

package com.xxxx.java; import java.io.IOException; import javax.servlet.Servlet; import javax.servlet.ServletConfig; import javax.servlet.ServletExc

深度學習論文翻譯解析:Detecting Text in Natural Image with Connectionist Text Proposal Network

論文標題:Detecting Text in Natural Image with Connectionist Text Proposal Network 論文作者:Zhi Tian , Weilin Huang, Tong He , Pan He , and Yu Qiao 論文原始碼的下載地址:htt