反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)-jsチュートリアル-php.cn

反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)

寻∝梦

リリース： 2018-09-11 14:13:07

オリジナル

1475 人が閲覧しました

この記事では主に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(&#39;example&#39;)
      );
    </script>
  </body>
</html>

ログイン後にコピー

上記の例では、オブジェクトである getInitialState メソッドを使用して作成されています。 this.state プロパティを通じて。ユーザーがコンポーネントをクリックして状態を変更すると、this.setState メソッドによって状態値が変更され、各変更後に this.render メソッドが自動的に呼び出され、コンポーネントが再度レンダリングされます。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
React ユーザーマニュアルの列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上が反応のステータスは何ですか?反応ステータスの詳細な紹介 (完全な例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。