リアクションの使い方は？ Reactの使い方を詳しく解説（例付き）

寻∝梦

リリース： 2018-09-11 16:10:13

オリジナル

3171 人が閲覧しました

この記事では主に react の使い方を紹介します興味のある方は、この記事の内容を一緒に見てみましょう

1. Props を使用します

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

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

2.デフォルトの小道具

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

2. コンポーネント API

1. 状態の設定: setState

setState(objectnextState[, function callback])

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

nextState、設定される新しい状態現在の状態と同じ状態は、

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

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

(2) setStateについて

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

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

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

2. 置換状態: replaceState

replaceState(object nextState[, functioncallback])

nextState、現在の状態を置き換える、設定される新しい状態。

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

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

3. プロパティを設定します: setProps

setProps(object nextProps[, functioncallback])

nextProps

、設定される新しいプロパティ、この状態は現在の

propscallback

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

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

4. 置換プロパティ: replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps

、現在の

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

、オプションのパラメータ、コールバック関数。この関数は、

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

メソッドは

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

forceUpdate([関数コールバック])

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

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

DOMElement findDOMNode()

戻り値: DOM 要素 DOMElement

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

7. コンポーネントのマウント状態を決定する: isMounted

bool isMounted()

戻り値: true または false、コンポーネントが DOM にマウントされているかどうかを示します (詳細を確認したい場合は、PHP 中国語 Web サイトのReact Reference Manual 列にアクセスして学習してください)

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

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

1. コンポーネントのライフサイクルは 3 つの状態に分類できます:

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

更新: 再レンダリング中

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

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

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

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

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

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

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

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

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

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

例 1: 入力ボックスの値が変更されたときに状態を更新できます。 onChange イベントを使用して、入力の変更を監視し、状態を変更できます。

5. React Refs

1. メソッド

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

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

var inputValue = input.value;

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

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
      },
      render: function() {
        // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="点我输入框获取焦点"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

ログイン後にコピー

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

の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がリアクションの使い方は？ Reactの使い方を詳しく解説（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。