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

1. Props を使用します

setState(objectnextState[, function callback])

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

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

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

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

2. 置換状態: replaceState

replaceState(object nextState[, functioncallback])

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

setProps(object nextProps[, functioncallback])

nextProps

propscallback

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

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

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 を通じてサポート インスタンスを取得します。

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

ar MyComponent = React.createClass({ handleClick: function() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); }, render: function() { // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs return ( 
   
 ); } }); ReactDOM.render( , document.getElementById('example') );

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