Latest web development tutorials

コンポーネントAPIを反応させます

このセクションでは、コンポーネントAPIに反応について説明します。 私たちは、以下の7つの方法を説明します：

  • セットステータス：SETSTATE
  • 置き換えステータス：replaceState
  • プロパティの設定setProps
  • プロパティreplacePropsを交換してください
  • アップデート：forceUpdate
  • DOMノードを取得します。findDOMNode
  • 成分を分析すると、装着状態：装着さ

セットステータス：SETSTATE 

setState(object nextState[, function callback])

パラメーター記述

  • nextState、新しい状態に設定すると、ステータスと現在の状態のマージ
  • コールバック、オプションのパラメータ、コールバック関数。 この関数は、アセンブリの再レンダリング後に呼び出され成功SETSTATEで提供されます。

nextStateと現在の状態、および再レンダリングコンポーネントをマージします。 SETSTATEイベントハンドラメソッドを反応させ、トリガー主要なUI更新コールバック関数を要求しています。

SETSTATEについて

状態は通話SETSTATEに置き換えられますので、あなたは後に（）、this.state状態によって内部コンポーネントを変更することはできません。

SETSTATE（）すぐにthis.stateを変更しませんが、すぐに状態の治療を作成します。 SETSTATE（）は、必ずしも性能を向上させるために同期されていないが、バッチ実行状態とDOMレンダリングを反応します。

SETSTATE（）は常にロジックのレンダリングにshouldComponentUpdate（）を達成するための条件の数がない限り、再描画アセンブリをトリガします。

例 

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

»をお試しください

ヒットカウンタがインクリメントされていることを確認するためにH2タグをクリックする例。

置き換えステータス：replaceState 

replaceState(object nextState[, function callback])
  • nextStateは、新しい状態が状態の現在の状態に置き換えられますする、設定されます。
  • コールバック、オプションのパラメータ、コールバック関数。 この関数は、アセンブリの再レンダリング後に呼び出され成功replaceStateで提供されます。

replaceState（）メソッドのSETSTATE（）は似ていますが、この方法が唯一nextState状態を維持し、元の状態は、ステータスが削除されますnextStateではありません。

プロパティの設定：setProps 

setProps(object nextProps[, function callback])
  • nextProps、新しいプロパティが設定され、合併の小道具の現在のステータスされます
  • コールバック、オプションのパラメータ、コールバック関数。 この関数は、アセンブリの再レンダリング後に呼び出され成功setPropsで提供されます。

コンポーネントのプロパティを設定し、コンポーネントを再レンダリングします。

データフローは、同等の構成要素を小道具 、それは常に親からすべてのサブアセンブリ構成要素に渡されます。 外部のJavaScriptおよびアプリケーション統合する場合は、我々はコンポーネントにデータを渡すために必要とするか、またはReact.render（）コンポーネントが再レンダリングする必要がある場合があり、あなたは）（setPropsを使用することができます。

私はsetPropsにより、コンポーネントのプロパティを変更するには（）メソッド、トリガーを再レンダリングする成分であることが）（ノード上で再び呼び出すことができますReact.renderコンポーネントを更新します。

属性を置き換えます。replaceProps 

replaceProps(object nextProps[, function callback])
  • nextProps、新しいプロパティを設定するには、このプロパティは、現在の小道具に置き換えられます。
  • コールバック、オプションのパラメータ、コールバック関数。 この関数は、アセンブリの再レンダリング後に呼び出され成功replacePropsで提供されます。

replaceProps（）メソッドは似てsetPropsですが、それは元が削除されます 

props

アップデート：forceUpdate 

forceUpdate([function callback])

パラメーター記述

  • コールバック、オプションのパラメータ、コールバック関数。 この関数は、コンポーネントのレンダリング（）メソッド呼び出しの後に呼び出されます。

forceUpdate（）メソッドは、それ自体がサブアセンブリのコンポーネントを再レンダリングするrender（）メソッドを呼び出してコンポーネントを引き起こし、コンポーネント）は（自分のレンダリング呼び出します。 状態が変わらない場合は、ときにアセンブリの再レンダリング、およびまだthis.props this.stateを読み込み、その後にのみ更新DOMを反応します。

）の方法により通知、（レンダリング呼び出しリアクト：forceUpdate（）メソッドは、外部のthis.propsに適しており、（変更後のthis.stateなど）this.stateコンポーネントの再描画します

一般的に、あなたはforceUpdate（）を使用しないように、とだけthis.propsと（レンダリングリアクトによってトリガthis.state状態をお読みください）を呼び出します。

DOMノードを取得します。findDOMNode 

DOMElement findDOMNode()
  • 戻り値：DOM要素DOMElementの

コンポーネントは、DOMに装着されている場合、この方法は、対応するローカルブラウザDOM要素を返します。 レンダリングすると、this.findDOMNode（）がnullまたはfalseの戻りはnullを返します。 フォームフィールドの値を取得し、いくつかのDOM操作を行います：DOM値から読んで、このアプローチは、次のような、便利です。

成分を分析すると、装着状態：装着さ 

bool isMounted()
  • 戻り値：trueまたはfalse、構成要素がDOMに搭載されているかどうかを示します

装着さ（）メソッドは、コンポーネントがDOMに取り付けられているかどうかを決定するために使用されます。 あなたは、非同期シナリオでSETSTATE（）とforceUpdate（）呼び出しが間違って行くことができないことを確実にするために、このメソッドを使用することができます。

参照により本明細書にします。http：//itbilu.com/javascript/react/EkACBdqKe.html