この記事では主に react の使い方を紹介します 興味のある方は、この記事の內(nèi)容を一緒に見(jiàn)てみましょう

1. Props を使用します

狀態(tài)とプロパティの主な違いは、プロパティは不変であるのに対し、狀態(tài)はユーザーとの対話に基づいて変更できることです。このため、一部のコンテナ コンポーネントではデータを更新および変更するために狀態(tài)を定義する必要があります。子コンポーネントは props を介してのみデータを渡すことができます。

インスタンスの name 屬性は this.props.name を通じて取得されます。

2.デフォルトの小道具

getDefaultProps() メソッドを通じて小道具のデフォルト値を設(shè)定できます。

2. コンポーネント API

1. 狀態(tài)の設(shè)定: setState

setState(objectnextState[, function callback])

(1) パラメーターの説明:

nextState、設(shè)定される新しい狀態(tài)現(xiàn)在の狀態(tài)と同じ 狀態(tài)は、

コールバック、オプションのパラメータ、およびコールバック関數(shù)をマージします。この関數(shù)は、setState が正常に設(shè)定され、コンポーネントが再レンダリングされた後に呼び出されます。

nextState と現(xiàn)在の狀態(tài)をマージし、コンポーネントを再レンダリングします。 setState は、React イベント処理関數(shù)およびリクエスト コールバック関數(shù)で UI 更新をトリガーする主なメソッドです。

(2) setStateについて

setState()を呼び出した後に狀態(tài)が置き換えられるため、コンポーネント內(nèi)でthis.stateを介して狀態(tài)を変更することはできません。

setState() は this.state をすぐには変更しませんが、処理される直前の狀態(tài)を作成します。 setState() は、パフォーマンスを向上させるために、必ずしも同期しているわけではありません。React は、狀態(tài)と DOM のレンダリングをバッチで実行します。

setState() は、條件付きレンダリング ロジックが shouldComponentUpdate() に実裝されていない限り、常にコンポーネントの再描畫(huà)をトリガーします。

2. 置換狀態(tài): replaceState

replaceState(object nextState[, functioncallback])

nextState、現(xiàn)在の狀態(tài)を置き換える、設(shè)定される新しい狀態(tài)。

コールバック、オプションのパラメータ、コールバック関數(shù)。この関數(shù)は、replaceState が正常に設(shè)定され、コンポーネントが再レンダリングされた後に呼び出されます。

replaceState() メソッドは setState() に似ていますが、このメソッドは nextState の狀態(tài)のみを保持し、nextState にない元の狀態(tài)は削除されます。

3. プロパティを設(shè)定します: setProps

setProps(object nextProps[, functioncallback])

nextProps

、設(shè)定される新しいプロパティ、この狀態(tài)は現(xiàn)在の

propscallback

とマージされますでは、パラメータとコールバック関數(shù)を選択できます。この関數(shù)は、

setProps が正常に設(shè)定され、コンポーネントが再レンダリングされた後に呼び出されます。 コンポーネントのプロパティを設(shè)定し、コンポーネントを再レンダリングします。

4. 置換プロパティ: replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps

、現(xiàn)在の

props を置き換える新しいプロパティ。 callback

、オプションのパラメータ、コールバック関數(shù)。この関數(shù)は、

replaceProps が正常に設(shè)定され、コンポーネントが再レンダリングされた後に呼び出されます。 replaceProps()

メソッドは

setPropsに似ていますが、元のpropsを削除します5. 強(qiáng)制更新:forceUpdate

forceUpdate([関數(shù)コールバック])

forceUpdate()メソッドは、コンポーネントに獨(dú)自の render() メソッドを呼び出してコンポーネントを再レンダリングし、コンポーネントのサブコンポーネントも獨(dú)自の render() メソッドを呼び出します。ただし、コンポーネントが再レンダリングされるとき、狀態(tài)が変更されていない場(chǎng)合は、this.props と this.state が引き続き読み取られます。React は DOM を更新するだけです。 forceUpdate() メソッドは、this.props と this.state 以外のコンポーネントを再描畫(huà)するのに適しています (例: this.state を変更した後)。このメソッドを通じて、React に render() を呼び出す必要があることが通知されます

。 6. DOM ノードの取得: findDOMNode

DOMElement findDOMNode()

戻り値: DOM 要素 DOMElement

コンポーネントが DOM にマウントされている場(chǎng)合、このメソッドは対応するローカル ブラウザーの DOM 要素を返します。 render が null または false を返すと、this.findDOMNode() も null を返します。このメソッドは、フォームフィールドの値を取得したり、一部の DOM 操作を?qū)g行したりするなど、DOM から値を読み取るときに便利です。

7. コンポーネントのマウント狀態(tài)を決定する: isMounted

bool isMounted()

戻り値: true または false、コンポーネントが DOM にマウントされているかどうかを示します (詳細(xì)を確認(rèn)したい場(chǎng)合は、PHP 中國(guó)語(yǔ) Web サイトのReact Reference Manual 列にアクセスして學(xué)習(xí)してください)

isMounted() メソッドは次の目的で使用されます。コンポーネントが DOM にマウントされているかどうかを確認(rèn)します。このメソッドを使用すると、非同期シナリオでの setState() および ForceUpdate() の呼び出しが失敗しないようにすることができます。

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

1. コンポーネントのライフサイクルは 3 つの狀態(tài)に分類(lèi)できます:

マウント: 実際の DOM に挿入

更新: 再レンダリング中

アンマウント: から削除実際の DOM

2. ライフサイクル メソッドは次のとおりです:

1) componentWillMount は、クライアントとサーバーの両方で、レンダリング前に呼び出されます。

2) componentDidMount : 最初のレンダリング後にクライアント側(cè)でのみ呼び出されます。その後、コンポーネントは対応する DOM 構(gòu)造を生成し、this.getDOMNode() を通じてアクセスできます。他の JavaScript フレームワークで使用する場(chǎng)合は、setTimeout、setInterval を呼び出すか、このメソッドで AJAX リクエストやその他の操作を送信します (外部操作による UI のブロックを防ぐため)。

3) componentWillReceiveProps は、コンポーネントが新しい prop を受信したとき (更新後) に呼び出されます。このメソッドは、レンダリングの初期化時(shí)には呼び出されません。

4) shouldComponentUpdate ブール値を返します。コンポーネントが新しいプロパティまたは狀態(tài)を受け取るときに呼び出されます。初期化中またはforceUpdateの使用中には呼び出されません。
コンポーネントを更新する必要がないことを確認(rèn)する場(chǎng)合に使用できます。

5) componentWillUpdateは、コンポーネントが新しいプロパティまたは狀態(tài)を受け取ったがまだレンダリングされていないときに呼び出されます。初期化中には呼び出されません。

6) componentDidUpdateは、コンポーネントが更新を完了した直後に呼び出されます。初期化中には呼び出されません。

7) componentWillUnmount は、コンポーネントが DOM から削除されるとすぐに呼び出されます。

IV.フォームとイベントに反応する

例 1: 入力ボックスの値が変更されたときに狀態(tài)を更新できます。 onChange イベントを使用して、入力の変更を監(jiān)視し、狀態(tài)を変更できます。

5. React Refs

1. メソッド

を使用して、ref 屬性を render の戻り値にバインドします:

他のコードでは、this.refs を通じてサポート インスタンスを取得します。

var inputValue = input.value;

2

ボタンをクリックすると、入力ボックスがフォーカスされます。

v

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 獲取焦點(diǎn)
        this.refs.myInput.focus();
      },
      render: function() {
        // 當(dāng)組件插入到 DOM 后，ref 屬性添加一個(gè)組件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="點(diǎn)我輸入框獲取焦點(diǎn)"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

この記事はここで終わります (さらに詳しく知りたい場(chǎng)合は、PHP 中國(guó)語(yǔ) Web サイトReact ユーザー マニュアル

の列にアクセスして學(xué)習(xí)してください)。ご質(zhì)問(wèn)がある場(chǎng)合は、以下にメッセージを殘してください。

以上がリアクションの使い方は？ Reactの使い方を詳しく解説（例付き）の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。