溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下react狀態機有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
react把組件看成是一個狀態機，通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。
在具有許多組件的應用程序中，在銷毀時釋放組件所占用的資源非常重要。
每當 Clock 組件第一次加載到 DOM 中的時候，我們都想生成定時器，這在 React 中被稱為掛載。
同樣，每當 Clock 生成的這個 DOM 被移除的時候，我們也會想要清除定時器，這在 React 中被稱為卸載。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> 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 ( <div> <h2>Hello, world!</h2> <h3>現在是 {this.state.date.toLocaleTimeString()}</h3> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('example') ); </script> </body> </html>
解析：
componentDidMount()與componentWillUnmount()方法被稱作生命周期鉤子。
在組件輸出到 DOM 后會執行componentDidMount()鉤子，我們就可以在這個鉤子上設置一個定時器。
this.timerID 為定時器的 ID，我們可以在 componentWillUnmount() 鉤子中卸載定時器。
當 被傳遞給 ReactDOM.render() 時，React 調用 Clock 組件的構造函數。 由于 Clock 需要顯示當前時間，所以使用包含當前時間的對象來初始化 this.state 。 我們稍后會更新此狀態。
React 然后調用 Clock 組件的render()方法。這是 React 了解屏幕上應該顯示什么內容，然后 React 更新 DOM 以匹配 Clock 的渲染輸出。
當 Clock 的輸出插入到 DOM 中時，React 調用 componentDidMount() 生命周期鉤子。 在其中，Clock 組件要求瀏覽器設置一個定時器，每秒鐘調用一次 tick()。
瀏覽器每秒鐘調用tick()方法。 在其中，Clock 組件通過使用包含當前時間的對象調用 setState() 來調度UI更新。 通過調用 setState() ，React 知道狀態已經改變，并再次調用 render() 方法來確定屏幕上應當顯示什么。 這一次，render() 方法中的 this.state.date將不同，所以渲染輸出將包含更新的時間，并相應地更新 DOM。
一旦 Clock 組件被從 DOM 中移除，React 會調用 componentWillUnmount() 這個鉤子函數，定時器也就會被清除。
看完了這篇文章，相信你對react狀態機有什么用有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
