react學習筆記4 狀態和生命週期

學習使用clock元件使**可復用，從封裝時鐘開始：

function

clock
(props) 
function
tick
()  />,
document.getelementbyid('root')
);}setinterval(tick,1000);

用類定義的元件有一些額外的特性，指的就是區域性狀態

class

clock
extends
react.component ;
}render() 
}reactdom.render(
,document.getelementbyid('root')
);

class

clock
extends
react.component ;
}componentdidmount() 
componentwillunmount()
tick() );
}render() 
}reactdom.render(
,document.getelementbyid('root')
);

setstate()

不要直接修改state

this.state.comment = 'hello';//錯誤

this.setstate();//正確

state更新可能是非同步的

將多個setstate()呼叫合併為一次更新，接收乙個函式，接收前乙個狀態值作為第乙個引數，將更新後的值作為第二個引數

this.setstate();//錯誤

this.setstate(() => ());//正確

this.setstate(function

(prevstate,props) ;
});

狀態值可以單獨更新

constructor

(props);}
componentdidmount());
});fetchcomments().then(response => );
});}

react學習筆記 react生命週期

react v16.4 的生命週期 提前感謝aermin的筆記詳解react生命週期 包括react16版 讓我收益匪淺。我通常把react生命週期劃分為四個階段 元件初始化，元件掛載，元件更新，元件解除安裝。import react,from react class test extends co...

react學習筆記4

header class site header jumbotron div class container div class row div class col xs 12 h1 歡迎來到妙味課堂 h1 p class lead 妙味課堂是一支獨具特色的it培訓團隊，妙味反對傳統it教育枯燥乏味...

React學習筆記 生命週期

constructor props 初始化方法。object getinitialstate 獲取初始state。void componentwillmount render之前執行一次。reactelement render 渲染檢視。void componentdidmount 初始化rande...