ホームページ >ウェブフロントエンド >jsチュートリアル >反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)
反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)
- 寻∝梦オリジナル
- 2018-09-11 14:13:071498ブラウズ
この記事では主にreactコンポーネントのステータスについて詳しく説明していますので、興味があればクリックしてreactステータスに関する記事の詳細をご覧ください
。
React コンポーネントは必然的にユーザーと常に対話する必要があり、最初に初期状態が存在し、ユーザーとの対話中に、ユーザーの各アクションがステート マシンの変更をトリガーする可能性があります。反応要素を表示します。 React の主な革新は、コンポーネントをステート マシンとして扱うことです。状態が変化すると、React は DOM を更新し、ユーザー インターフェイスとデータの一貫性を保つために最も効果的な方法でページを再レンダリングします。
1. stateの仕組み
1. 1 状態の保存
Reactはコンポーネントの状態をthis.stateに保存します。
1、2 状態の初期値を設定します
this.state の初期値を設定するには 2 つの方法があります:
React.createClass メソッドを使用してコンポーネントを作成する場合は、getInitialState メソッドを使用して状態を初期化します。
var scoreComponent=React.createClass({
getInitialState:function(){
return{
score:0
};
}
......
});
如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
constructor(props){
super(props);
this.state ={score:60};
}
...}1.3 コンポーネントの状態を変更するメソッド
this.setState(data, callback) を使用して、状態の値を変更します。このメソッドは、データを this.state にマージし、コンポーネントを再レンダリングできます。 data パラメータには、オブジェクト、または更新するフィールドを含むオブジェクトを返す関数を指定できます。オプションのコールバックは、コンポーネントが再レンダリングされた後に呼び出されます。 this.setState メソッドは状態値を変更します。変更するたびに、this.render メソッドが自動的に呼び出され、コンポーネントが再度レンダリングされます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact リファレンス マニュアル の列にアクセスして学習してください)
1.4 どのような種類のデータが含まれているかを記述する必要があります
UI インタラクションによりデータが変更されます。
1.5 ステートに含めるべきでないデータは何ですか? 1. 計算されたデータ
2. コンポーネント
3. props からコピーされたデータ
ステートには、時間などの最もオリジナルなデータが含まれるべきであり、書式設定はプレゼンテーション層に任せるべきです。
コンポーネントは render メソッドで制御する必要があります。
2. 状態の開発例
1. クリック数を計算する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React状态机</title>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>
<script type="text/javascript" src="js/browser.min.js" ></script>
</head>
<body>
<p id="example"></p>
<script type="text/babel">
var BtnButton = React.createClass({
getInitialState: function() {
return {count: 0};
},
handleClick: function(event) {
this.setState({count:this.state.count+1});
},
render: function() {
var text =this.state.count ;
return (
<p onClick={this.handleClick}>
获取点击的次数<br />
<span>{text}</span>
</p>
);
}
});
ReactDOM.render(
<BtnButton />,
document.getElementById('example')
);
</script>
</body>
</html>上記の例では、オブジェクトである getInitialState メソッドを使用して作成されています。 this.state プロパティを通じて。ユーザーがコンポーネントをクリックして状態を変更すると、this.setState メソッドによって状態値が変更され、各変更後に this.render メソッドが自動的に呼び出され、コンポーネントが再度レンダリングされます。 この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
React ユーザー マニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。
以上が反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。