react狀態機是什麼-js教程-PHP中文網

首頁

web前端

js教程

react狀態機是什麼

coldplay.xixi

Nov 27, 2020 am 11:05 AM

react狀態機

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 id="Hello-nbsp-world">Hello, world!</h1>
        <h2 id="现在是-nbsp-this-state-date-toLocaleTimeString">现在是 {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() 這個鉤子函數，計時器也會被清除。