溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

react狀態(tài)機(jī)有什么用

發(fā)布時(shí)間：2020-11-30 13:41:32 來(lái)源：億速云 閱讀：135 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下react狀態(tài)機(jī)有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

react把組件看成是一個(gè)狀態(tài)機(jī)，通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。

React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。

React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

在具有許多組件的應(yīng)用程序中，在銷毀時(shí)釋放組件所占用的資源非常重要。

每當(dāng) Clock 組件第一次加載到 DOM 中的時(shí)候，我們都想生成定時(shí)器，這在 React 中被稱為掛載。

同樣，每當(dāng) Clock 生成的這個(gè) DOM 被移除的時(shí)候，我們也會(huì)想要清除定時(shí)器，這在 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>現(xiàn)在是 {this.state.date.toLocaleTimeString()}</h3>
      </div>
    );
  }
}
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);
</script>
</body>
</html>

解析：

componentDidMount()與componentWillUnmount()方法被稱作生命周期鉤子。

在組件輸出到 DOM 后會(huì)執(zhí)行componentDidMount()鉤子，我們就可以在這個(gè)鉤子上設(shè)置一個(gè)定時(shí)器。

this.timerID 為定時(shí)器的 ID，我們可以在 componentWillUnmount() 鉤子中卸載定時(shí)器。

當(dāng) 被傳遞給 ReactDOM.render() 時(shí)，React 調(diào)用 Clock 組件的構(gòu)造函數(shù)。 由于 Clock 需要顯示當(dāng)前時(shí)間，所以使用包含當(dāng)前時(shí)間的對(duì)象來(lái)初始化 this.state 。 我們稍后會(huì)更新此狀態(tài)。

React 然后調(diào)用 Clock 組件的render()方法。這是 React 了解屏幕上應(yīng)該顯示什么內(nèi)容，然后 React 更新 DOM 以匹配 Clock 的渲染輸出。

當(dāng) Clock 的輸出插入到 DOM 中時(shí)，React 調(diào)用 componentDidMount() 生命周期鉤子。 在其中，Clock 組件要求瀏覽器設(shè)置一個(gè)定時(shí)器，每秒鐘調(diào)用一次 tick()。

瀏覽器每秒鐘調(diào)用tick()方法。 在其中，Clock 組件通過(guò)使用包含當(dāng)前時(shí)間的對(duì)象調(diào)用 setState() 來(lái)調(diào)度UI更新。 通過(guò)調(diào)用 setState() ，React 知道狀態(tài)已經(jīng)改變，并再次調(diào)用 render() 方法來(lái)確定屏幕上應(yīng)當(dāng)顯示什么。 這一次，render() 方法中的 this.state.date將不同，所以渲染輸出將包含更新的時(shí)間，并相應(yīng)地更新 DOM。

一旦 Clock 組件被從 DOM 中移除，React 會(huì)調(diào)用 componentWillUnmount() 這個(gè)鉤子函數(shù)，定時(shí)器也就會(huì)被清除。

看完了這篇文章，相信你對(duì)react狀態(tài)機(jī)有什么用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手