小編給大家分享一下react狀態(tài)機有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及成都社區(qū)文化墻等，在網(wǎng)站建設(shè)公司、網(wǎng)絡(luò)營銷推廣、WAP手機網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。
react把組件看成是一個狀態(tài)機，通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。
在具有許多組件的應(yīng)用程序中，在銷毀時釋放組件所占用的資源非常重要。
每當 Clock 組件第一次加載到 DOM 中的時候，我們都想生成定時器，這在 React 中被稱為掛載。
同樣，每當 Clock 生成的這個 DOM 被移除的時候，我們也會想要清除定時器，這在 React 中被稱為卸載。
Hello React!
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
Hello, world!
現(xiàn)在是 {this.state.date.toLocaleTimeString()}
);
}
}
ReactDOM.render(
,
document.getElementById('example')
);
解析：
componentDidMount()與componentWillUnmount()方法被稱作生命周期鉤子。
在組件輸出到 DOM 后會執(zhí)行componentDidMount()鉤子，我們就可以在這個鉤子上設(shè)置一個定時器。
this.timerID 為定時器的 ID，我們可以在 componentWillUnmount() 鉤子中卸載定時器。
當 被傳遞給 ReactDOM.render() 時，React 調(diào)用 Clock 組件的構(gòu)造函數(shù)。 由于 Clock 需要顯示當前時間，所以使用包含當前時間的對象來初始化 this.state 。 我們稍后會更新此狀態(tài)。
React 然后調(diào)用 Clock 組件的render()方法。這是 React 了解屏幕上應(yīng)該顯示什么內(nèi)容，然后 React 更新 DOM 以匹配 Clock 的渲染輸出。
當 Clock 的輸出插入到 DOM 中時，React 調(diào)用 componentDidMount() 生命周期鉤子。 在其中，Clock 組件要求瀏覽器設(shè)置一個定時器，每秒鐘調(diào)用一次 tick()。
瀏覽器每秒鐘調(diào)用tick()方法。 在其中，Clock 組件通過使用包含當前時間的對象調(diào)用 setState() 來調(diào)度UI更新。 通過調(diào)用 setState() ，React 知道狀態(tài)已經(jīng)改變，并再次調(diào)用 render() 方法來確定屏幕上應(yīng)當顯示什么。 這一次，render() 方法中的 this.state.date將不同，所以渲染輸出將包含更新的時間，并相應(yīng)地更新 DOM。
一旦 Clock 組件被從 DOM 中移除，React 會調(diào)用 componentWillUnmount() 這個鉤子函數(shù)，定時器也就會被清除。
看完了這篇文章，相信你對react狀態(tài)機有什么用有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
分享題目：react狀態(tài)機有什么用
網(wǎng)頁地址：http://weahome.cn/article/geedjh.html
重慶分公司
重慶分公司
