React コンポーネント API


この章では、React コンポーネント API について説明します。以下の7つのメソッドについて説明します:

  • set state: setState

  • replace state: replaceState

  • set property setProps

  • replace property replaceProps

  • 強制更新:forceUpdate

  • DOMノードの取得: findDOMNode

  • コンポーネントの実装状態の判断: isMounted

状態の設定: setState

setState(object nextState[, function callback])

パラメータの説明

  • nextState、設定される新しい状態は同じになります現在の状態としてstateMerge

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

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

setStateについて

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

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

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

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
      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')
      );
    </script>
  </body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

この例では、h2 タグをクリックすると、クリック カウンタが 1 増加します。

状態の置換: replaceState

replaceState(object nextState[, function callback])

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

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

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

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

setProps(object nextProps[, function callback])

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

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

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

props はコンポーネントのデータ フローに相当し、常に親コンポーネントからすべての子コンポーネントに渡されます。外部 JavaScript アプリケーションと統合する場合、データを渡すか、コンポーネントに通知する必要がある場合があります React.render() コンポーネントを再レンダリングする必要がある場合は、setProps() を使用できます。

コンポーネントを更新するには、ノード上でReact.render()を再度呼び出すか、setProps()メソッドを通じてコン​​ポーネントのプロパティを変更してコンポーネントの再レンダリングをトリガーできます。

プロパティの置換: replaceProps

replaceProps(object nextProps[, function callback])

  • nextProps、現在の props を置き換える、設定される新しいプロパティ。

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

replaceprops（）メソッドはsetpropsに似ていますが、元の

rreee

forceアップデートを削除します。 。この関数は、コンポーネントの

render()

メソッドが呼び出された後に呼び出されます。

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

    DOM ノードの取得: findDOMNode

    props

    • 戻り値: DOM 要素 DOMElement

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

    コンポーネントのマウントステータスを決定します: isMounted

    forceUpdate([function callback])

    • 戻り値: trueまたはfalse、コンポーネントがDOMにマウントされているかどうかを示します

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

    この記事の参照先: http://itbilu.com/javascript/react/EkACBdqKe.html