ホームページ >ウェブフロントエンド >jsチュートリアル >反応ステートマシンとは何ですか
反応ステートマシンとは何ですか
- coldplay.xixiオリジナル
- 2020-11-27 11:05:011966ブラウズ
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('example')
);
</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() フック関数を呼び出し、タイマーがクリアされます。
関連する学習の推奨事項: JavaScript 学習チュートリアル
以上が反応ステートマシンとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。