反応の機能は何ですか? React 関数の詳細な分析 (例付き)

この記事では主に react の学習方法について説明します それでは、記事の主な内容を見てみましょう

React は基本的に JavaScript ライブラリです。

これは、ページを組み立てる作業の一部をブラウザに転送する、前から後ろへの分離のアイデアを具体化しています。JSP ファイルとは異なり、ページのレイアウトとデータの入力はサーバーの後にブラウザに送信されます。それを完成させます。

これを行うことには当然多くの利点があります: まず、React は DOM と JavaScript をモジュール (コンポーネント) にカプセル化します。それだけでなく、コンポーネントはテストと懸念事項の分離も簡単にします。次に、データが変更された場合、React はユーザー インターフェイスを自動的に更新し、更新する必要がある部分のみを更新できます。

コア関数 1: render

この関数の機能は、ページを組み立てるために使用される、レゴおもちゃの組み立てブロックのようなモジュールを提供することです。

簡単な例: (HTML コードが最初に与えられ、JSX コードが後で与えられます。JSX は JavaScript+XML を意味します)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/ReactDOM.render(
    <p>Hello, world!</p>,
    document.getElementsByClassName(&#39;firstContainer&#39;)[0]
);

クラス firstContainer を持つ p の内容が、次のコードに置き換えられていることがわかります。レンダリングで書きました: hello world!

さらに、 document.getElementsByClassName('firstContainer')[0] を任意のネイティブ JavaScript に置き換えて単一の JavaScript を取得できます (ノードである必要があるため、 document.getElementsByClassName のようなメソッドを使用する場合は、 [n を追加する必要があります) ] ) **DOM 要素メソッド: document.getElementById または document.getElementsByTagName などはすべて受け入れられます。

より複雑な例については、ここで e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3 を展開できます。

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
  <p>
  {
    (function(){        return <p>Hello, {name}!</p>
    })()
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

コードでは、JS と DOM が混在していると言える JSX 構文の魔法がわかります。 JSX の基本的な構文ルール: HTML タグ (< で始まる) に遭遇した場合は HTML ルールを使用して解析し、コード ブロック ({ で始まる) に遭遇した場合は JavaScript ルールを使用して解析します。

コア関数 2: React.createClass

この関数を使用すると、必要なコンポーネントを自分で定義でき、定義されたコンポーネントを p のようなタグとして render 関数で直接使用できます。

シンプルなクリ:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
  render: function() {    return (
      <p className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </p>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById(&#39;container&#39;)
);

このクリでは、HelloWorldBox が最も単純なコンポーネントです。

このコンポーネントに関する詳細情報も入手できます。たとえば、props を使用します

(React 公式 Web サイトからの例)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var CommentList = React.createClass({
  render: function() {    return (
      <p className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </p>
    );
  }
});
ReactDOM.render(
  <CommentList />,
  document.getElementById(&#39;container&#39;)
);

この栗では、React.createClass メソッドを使用して 2 つのコンポーネントを作成しています。コンポーネント CommentList 内で Comment がネストされていることがわかります。 , CommentList は複数の Comments で構成されます。 CommentList の Comment 属性を author として定義します。次に、Comment コンポーネントで、{this.props.author} を通じてこのプロパティを読み取ることができ、また {this.props.children} を通じてこのコンポーネントの子ノードを読み取ることができます。

外部データへのアクセス:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var names = [&#39;Alice&#39;, &#39;Emily&#39;, &#39;Kate&#39;];
ReactDOM.render(
  <p>
  {
    names.map(function (name) {      return <Comment author={name}>is an author~</Comment>
    })
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

ここで、配列名はコンポーネントを作成して Web ページの DOM に埋め込みます。

コンポーネントの状態

各コンポーネントには属性「state」があり、開発者は this.setState() を呼び出すことでコンポーネントの状態を変更できます。状態が更新されると、コンポーネントはそれ自体を再レンダリングします。 state と props は両方ともコンポーネントの特性ですが、props は変更されないが、state は変更できるという違いがあります。

getInitialState() は、コンポーネントの初期化状態を設定できます。この関数は、コンポーネントのライフサイクルで 1 回だけ実行されます。

更新ステータス:

注:componentDidMount 関数は、コンポーネントがレンダリングされるときに React が自動的に呼び出すメソッドです。詳しくは後ほど説明します。

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </p>
    );
  }
});

このクリではajaxでデータを取得し、this.setState関数で取得したデータをthis.state.dataに設定しています。次に、CommentList に data={this.state.data} を設定して、サーバーから取得したデータを表示します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact リファレンス マニュアル の列にアクセスして学習してください)

コンポーネントのライフ サイクル

コンポーネントのライフ サイクルは、次の 3 つのタイプに分類されます:

1. 実装:実 DOM が挿入されました

2. 更新中: 再レンダリング中

3. アンマウント中: 実 DOM から移動されました

コンポーネントのライフサイクルでは、ライフサイクル関数が自動的に呼び出されます。それらは次のとおりです:

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

2 つの特別なステータス処理関数もあります:

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

次の例は Ruan Yifeng のブログからのものです:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;      if (opacity < 0.1) {
        opacity = 1.0;
      }      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 render: function () {
    return (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

この関数では、コンポーネントが実際の DOM に挿入された後に、componentDidMount 関数が呼び出されます。コンポーネントが完全に透明になるまで 100 ミリ秒ごとに透明度を変更するようにタイマーを設定し、その後透明度を 1 に設定します (初期透明度は 1 に設定されます)。このようにして、このコンポーネント パーティは常にレンダリングされます。このようにして、ページ上で点滅する hello world 文字列を取得します。関数

componentDidUpdate:function(){
    console.log("did update");
}

を作成すると、コンソールに継続的な出力が表示されます。

React は基本的に JavaScript ライブラリです。

これは、ページを組み立てる作業の一部をブラウザに転送する、前から後ろへの分離のアイデアを具体化しています。JSP ファイルとは異なり、ページのレイアウトとデータの入力はサーバーの後にブラウザに送信されます。それを完成させます。

これを行うことには当然多くの利点があります: まず、React は DOM と JavaScript をモジュール (コンポーネント) にカプセル化します。それだけでなく、コンポーネントはテストと懸念事項の分離も簡単にします。次に、データが変更された場合、React はユーザー インターフェイスを自動的に更新し、更新する必要がある部分のみを更新できます。

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

以上が反応の機能は何ですか? React 関数の詳細な分析 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。