反応ステートマシンとは何ですか-jsチュートリアル-php.cn

反応ステートマシンとは何ですか

coldplay.xixi

リリース： 2020-11-27 11:05:30

オリジナル

1960 人が閲覧しました

React はコンポーネントをステートマシンと見なし、ユーザーとの対話を通じてさまざまな状態を実現し、ユーザーインターフェイスとデータの一貫性を保つために UI をレンダリングします。

反応ステートマシンとは何ですか

React はコンポーネントを State Machine (ステートマシン) として扱います。ユーザーと対話することにより、さまざまな状態が実現され、ユーザーインターフェイスとデータの一貫性を保つために UI がレンダリングされます。

React では、コンポーネントの状態を更新し、(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() フックでタイマーをアンインストールできます。

React は、ReactDOM.render() に渡されると、Clock コンポーネントのコンストラクターを呼び出します。 Clock は現在時刻を表示する必要があるため、this.state は現在時刻を含むオブジェクトで初期化されます。この状況は後ほど更新します。

React は、Clock コンポーネントの render() メソッドを呼び出します。これは、React が画面上に何を表示すべきかを理解した後、Clock のレンダリング出力と一致するように DOM を更新します。

Clock の出力が DOM に挿入されると、React は、componentDidMount() ライフサイクルフックを呼び出します。その中で、Clock コンポーネントはブラウザーにタイマーを設定し、毎秒 check() を呼び出すことを要求します。

ブラウザは tick() メソッドを毎秒呼び出します。その中で、Clock コンポーネントは、現在の時刻を含むオブジェクトを使用して setState() を呼び出すことにより、UI の更新をスケジュールします。 setState() を呼び出すことで、React は状態が変化したことを認識し、画面に何を表示するかを決定するために render() メソッドを再度呼び出します。今回は、 render() メソッドの this.state.date が異なるため、レンダリングされた出力には更新時間が含まれ、DOM もそれに応じて更新されます。

Clock コンポーネントが DOM から削除されると、React は、componentWillUnmount() フック関数を呼び出し、タイマーがクリアされます。