首頁 > 文章 > web前端 > react狀態機是什麼

react狀態機是什麼

coldplay.xixi原創: 2020-11-27 11:05:011849瀏覽

react把元件看成是狀態機，透過與使用者的交互，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致。

react狀態機是什麼

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>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}</h2>
      </div>
    );
  }
}
ReactDOM.render(
  <Clock />,
  document.getElementById(&#39;example&#39;)
);
</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() 這個鉤子函數，計時器也會被清除。

相關學習推薦：javascript學習教學

以上是react狀態機是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery怎麼達到淡入淡出效果下一篇：jquery怎麼達到淡入淡出效果

看更多