react狀態機是什麼 - tw511教學網

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>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.state.date.toLocaleTimeString()}</h2>
      </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狀態機是什麼的詳細內容，更多請關注TW511.COM其它相關文章！